Durchsuche ein kuratiertes Verzeichnis beliebter Google Fonts mit Live-Vorschauen, filtere nach Kategorie und suche nach Namen, kopiere dann kopierfertiges CSS und entdecke vorgeschlagene Schriftpaarungen — alles in deinem Browser.

Größe 34px

Alles läuft in deinem Browser — Schriften werden nur für die Live-Vorschau von Google Fonts geladen, nichts wird hochgeladen, keine Anmeldung, völlig kostenlos.


Über Schriftpaarungen & Google-Fonts-Verzeichnis

Dieses Font-Verzeichnis versammelt 80 beliebte Google Fonts auf einer durchsuchbaren Seite, jede als Live-Muster mit einer Pangramm-Beispielzeile, einer Alphabet- und Ziffernzeile sowie einem Kategorie-Badge dargestellt. Es deckt fünf Schriftfamilien ab: Serifenlos, Serifenbetont, Display, Handschrift und Monospace, sodass du echte Schriftformen vergleichen kannst, statt anhand von Namen zu raten.

Jede Font-Karte enthält kuratierte Pairing-Vorschläge: Partnerschriften, die für Überschriften und Fließtext gut zusammenpassen. Ein Klick auf einen Pairing-Chip öffnet eine Vorschau, die eine Überschrift in einer Schrift und einen Absatz in der anderen setzt, sodass du die Kombination im Kontext beurteilen kannst, bevor du dich festlegst.

Passen eine Schrift oder ein Pairing, kopiert ein Klick einsatzbereites CSS: eine @import-Zeile für das Google-Fonts-Stylesheet plus den passenden font-family-Stack mit sinnvollem Fallback. Schriften werden nur für die Live-Vorschauen von Google Fonts geladen; nichts, was du eingibst, wird irgendwohin hochgeladen.

So verwenden Sie Schriftpaarungen & Google-Fonts-Verzeichnis

  1. Durchsuche die Font-Karten, jede mit Namen, Kategorie-Badge und Live-Beispieltext in der tatsächlichen Schriftart.
  2. Nutze das Suchfeld, um eine Schrift nach Namen zu finden, oder klicke auf einen Kategorie-Chip (Serifenlos, Serifenbetont, Display, Handschrift, Monospace), um das Raster zu filtern.
  3. Ziehe den Größenregler (16–72 px), um die Beispielzeile in deiner Ziel-Überschriften- oder Fließtextgröße zu betrachten.
  4. Klicke auf einen „Passt zu“-Chip oder den Button „Pairing-Vorschau“, um eine Überschrift und einen Fließtextabsatz in der vorgeschlagenen Kombination zu sehen.
  5. Klicke auf den „CSS“-Button an einer Karte oder in der Pairing-Vorschau, um die @import-Zeile und die font-family-Deklarationen in deine Zwischenablage zu kopieren.

Häufig gestellte Fragen

Es umfasst eine kuratierte Auswahl von 80 weit verbreiteten Google Fonts, verteilt auf fünf Kategorien: Serifenlos, Serifenbetont, Display, Handschrift und Monospace. Jeder Kategorie-Chip zeigt eine Live-Anzahl, sodass du siehst, wie viele Schriften zu deinem aktuellen Filter passen.

Jede Schrift listet eine oder zwei handverlesene Partnerschriften auf, die gut mit ihr kontrastieren: typischerweise eine Display- oder Serifenschrift für Überschriften, kombiniert mit einer gut lesbaren Fließtextschrift. Die Pairing-Vorschau zeigt für jede Kombination die genauen Überschriften- und Fließtextrollen.

Für eine einzelne Schrift erhältst du eine @import-url()-Zeile für den Google-Fonts-css2-Endpunkt (Normal- und Fettgewicht) plus einen font-family-Stack mit dem passenden generischen Fallback. Bei einem Pairing erhältst du beide Imports sowie separate Deklarationen für Überschriften und Fließtext.

Ja, Live-Vorschauen laden die Schriftarten vom Google-Fonts-CDN: das ist die einzige externe Anfrage der Seite. Deine Suchen, Filterauswahlen und kopierten CSS bleiben in deinem Browser; nichts wird hochgeladen oder gespeichert.

Ja, Durchsuchen, Pairing-Vorschauen und CSS-Kopieren sind alle kostenlos, ohne erforderliches Konto. Die aufgeführten Schriftarten sind Google Fonts, die selbst unter ihren offenen Lizenzen kostenlos für private und kommerzielle Projekte genutzt werden können.

Du kannst die Mustergröße mit dem Größenregler von 16 px bis 72 px anpassen, was jede Karte gleichzeitig aktualisiert. Das erleichtert den Vergleich von Kandidaten in genau der Größe, die du für Überschriften oder Fließtext planst.

Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.