Font-Tester & Paarung

Google-Fonts-Paarungen, Abstand und Stile dynamisch ansehen.

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ählen Sie Google Fonts zum Kombinieren und Vorschauen.
Tippen Sie Ihren eigenen Text in die editierbare Live-Vorschau.
Justieren Sie Größe, Stärke und Abstand, um die Typografie zu testen.
Exportieren Sie das CSS, um die Kombination in Ihrem Projekt zu verwenden.

Wofür man es nutzt

Eine Überschriften-/Fließtext-Schriftkombination ausprobieren, bevor Sie sich festlegen.
In der Vorschau sehen, wie echter Text in einer Schrift wirkt.
Das CSS zum Einbetten einer Google-Fonts-Kombination erhalten.

Gut zu wissen

Es lädt Schriften von Google Fonts, sodass die Vorschau einer Schrift sie von Google abruft (die eine Stelle, an der dieses Tool nicht vollständig offline ist).
Das Rendering kann sich zwischen Betriebssystemen und Browsern leicht unterscheiden.

Häufige Fragen

Verwendet es meinen eigenen Text?

Ja — die Vorschau ist editierbar, sodass Sie echte Überschriften und Absätze statt Platzhaltertext einfügen können.

Kann ich das CSS bekommen?

Ja — es exportiert das CSS zum Einbetten der gewählten Google-Fonts-Kombination in Ihre Website.

Ist dies vollständig offline?

Fast — alles läuft in Ihrem Browser, doch die Vorschau einer Google-Schrift ruft die Schriftdatei von Google ab. Kein von Ihnen getippter Text wird hochgeladen.

Font-Tester & Paarung

Typografie-Einrichtung

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Verwendet es meinen eigenen Text?

Kann ich das CSS bekommen?

Ist dies vollständig offline?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Verwendet es meinen eigenen Text?

Kann ich das CSS bekommen?

Ist dies vollständig offline?