Schriftarten testen

Google-Fonts-Kombinationen mit eigenem Text ansehen und das CSS dazu kopieren.

Typografie-Einrichtung

Titelschrift

Fließtextschrift

Titelgröße36px

Titelstrichstärke

Textgröße16px

Textstrichstärke

Beliebte Kombinationen

Modern TechPoppins + InterKlassisches EditorialPlayfair Display + LoraCorporate BoldMontserrat + Open SansClean MonospaceJetBrains Mono + RobotoWarme NachrichtenMerriweather + Lato

CSS-Code-Export

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

So funktioniert es

Wähle Google Fonts aus, die du kombinieren und ansehen willst.
Tippe deinen eigenen Text in die bearbeitbare Live-Vorschau.
Ändere Größe, Schriftstärke und Abstände, um die Typografie zu testen.
Exportiere das CSS, um die Kombination in deinem Projekt zu nutzen.

Wofür man es nutzt

Eine Kombination aus Überschrift- und Textschrift ausprobieren, bevor du dich festlegst.
Ansehen, wie echter Text in einer Schrift wirkt.
Das CSS bekommen, um eine Google-Fonts-Kombination einzubinden.

Gut zu wissen

Das Tool lädt Schriften von Google Fonts. Für die Vorschau einer Schrift wird sie also bei Google abgerufen (die einzige Stelle, an der dieses Tool nicht ganz offline arbeitet).
Die Darstellung kann sich je nach Betriebssystem und Browser leicht unterscheiden.

Häufige Fragen

Kann ich meinen eigenen Text benutzen?

Ja. Die Vorschau ist bearbeitbar, du kannst also echte Überschriften und Absätze statt Platzhaltertext einfügen.

Bekomme ich das CSS?

Ja. Das Tool exportiert das CSS, mit dem du die gewählte Google-Fonts-Kombination auf deiner Website einbindest.

Funktioniert das ganz offline?

Fast: Alles läuft in deinem Browser, aber für die Vorschau einer Google-Schrift wird die Schriftdatei von Google geladen. Ein Text, den du tippst, wird nicht hochgeladen.

Schriftarten testen

Typografie-Einrichtung

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Kann ich meinen eigenen Text benutzen?

Bekomme ich das CSS?

Funktioniert das ganz offline?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Kann ich meinen eigenen Text benutzen?

Bekomme ich das CSS?

Funktioniert das ganz offline?