Developer Tools
Text ToolsSchriftvorschau-Tool
Vorschau jeder Google Font mit benutzerdefiniertem Text, Größe, Gewicht und Farbe. CSS-Import-Code sofort generieren. Kostenloses Online-Schriftvorschau-Tool.
Beliebte Schriften
Style
Browser Support
Style Tags
216 fonts
Live-Vorschau
The quick brown fox jumps over the lazy dog
Schriftvorschau
Schriftname:Roboto
Schriftgröße:32px
Schriftgewicht:400
CSS-Code
font-family CSS:
font-family: 'Roboto', sans-serif;Google Fonts Import-URL:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}Verwandte Tools
Über das Schriftvorschau-Tool
So funktioniert es
- Geben Sie einen beliebigen Google Fonts-Familiennamen ein oder wählen Sie aus der beliebten Liste
- Die Schrift wird dynamisch über die Google Fonts API in Ihrem Browser geladen
- Passen Sie Gewicht, Größe, Farbe und Hintergrund an, um Ihre ideale Konfiguration zu sehen
- Kopieren Sie die CSS font-family-Deklaration oder die Import-URL zur Verwendung in Ihrem Projekt
- Wechseln Sie zwischen voreingestellten Beispieltexten (Pangramm, Alphabet, Lorem Ipsum) oder geben Sie benutzerdefinierten Text ein
Häufige Anwendungsfälle
- Die richtige Schrift für ein neues Webprojekt auswählen
- Vergleichen, wie verschiedene Gewichte derselben Schrift bei unterschiedlichen Größen aussehen
- Den korrekten CSS-Import-Ausschnitt für eine Google Font generieren
- Schriftauswahl schnell Kunden demonstrieren, ohne den Browser zu verlassen
- Zahlen- und Symboldarstellung für Dashboards und datenintensive UIs prüfen
Häufig gestellte Fragen
Was ist das Schriftvorschau-Tool?
Das Schriftvorschau-Tool ermöglicht es Ihnen, jede Google Font-Familie zu laden, deren Gewicht, Größe, Farbe und Hintergrund anzupassen, sie mit benutzerdefiniertem Text zu previwen und den CSS-Import-Code zu kopieren — direkt im Browser, ohne Installation.
Wie kann ich eine Google Font vorschauen?
Geben Sie den Google Font-Namen (z.B. 'Playfair Display') in das Suchfeld ein und klicken Sie auf 'Schrift laden', oder klicken Sie auf einen Namen aus der Liste der beliebten Schriften. Die Schrift wird vom Google Fonts CDN abgerufen und sofort im Vorschaubereich gerendert.
Kann ich jede Google Font verwenden?
Ja. Sie können den genauen Namen jeder auf Google Fonts verfügbaren Schrift (fonts.google.com) eingeben. Das Tool erstellt die korrekte API-URL und lädt automatisch alle verfügbaren Gewichte (100–900).
Welche Schriftgewichte werden unterstützt?
Das Tool fordert Gewichte von 100 bis 900 von Google Fonts an. Wenn eine Schrift ein bestimmtes Gewicht nicht enthält, rendert der Browser stattdessen das nächstverfügbare Gewicht.
Wie kopiere ich den CSS-Code für mein Projekt?
Sobald eine Schrift geladen ist, scrollen Sie zum CSS-Code-Bereich im rechten Panel. Verwenden Sie die Kopierschaltflächen neben jedem Ausschnitt, um die font-family-Deklaration, die @import-URL oder den vollständigen CSS-Block in die Zwischenablage zu kopieren.
Welche Beispieltexte sind verfügbar?
Sechs Voreinstellungen stehen zur Verfügung: Pangramm, Alphabet, Zahlen & Symbole, Lorem Ipsum, ein Überschriften-Beispiel und ein Absatz-Beispiel. Sie können auch Ihren eigenen benutzerdefinierten Text im Feld Benutzerdefinierter Text eingeben.
Speichert dieses Tool Daten?
Nein. Das Schriftvorschau-Tool ist vollständig browserbasiert. Es lädt Schriften über die öffentliche Google Fonts API und speichert nichts auf einem Server. Ihr benutzerdefinierter Text und Ihre Einstellungen existieren nur in Ihrer Browsersitzung.
Kann ich die Textfarbe und den Hintergrund ändern?
Ja. Verwenden Sie die Farbwähler im Farben-Bereich, um eine beliebige Hex-Farbe für den Text und den Vorschauhintergrund auszuwählen. Dies ist hilfreich beim Überprüfen von Kontrastverhältnissen oder beim Ansehen, wie eine Schrift auf dunklen Hintergründen wirkt.
Warum schlägt das Laden einer Schrift fehl?
Das Laden einer Schrift kann fehlschlagen, wenn der Schriftname falsch geschrieben ist, wenn die Schrift aus Google Fonts entfernt wurde oder wenn Ihr Netzwerk Anfragen an fonts.googleapis.com blockiert. Überprüfen Sie den genauen Namen auf fonts.google.com und versuchen Sie es erneut.
Ist dieses Tool kostenlos?
Ja, das Schriftvorschau-Tool ist vollständig kostenlos. Die Schriften selbst werden vom Google Fonts CDN unter Open-Source-Lizenzen bereitgestellt — überprüfen Sie die Lizenz jeder Schrift auf fonts.google.com, bevor Sie sie in einem kommerziellen Projekt verwenden.
Kann ich mehrere Schriften nebeneinander vergleichen?
Sie können schnell zwischen Schriften wechseln, indem Sie die Chips für beliebte Schriften verwenden und beobachten, wie sich derselbe Text verändert. Für einen formalen Vergleich nebeneinander öffnen Sie das Tool in zwei Browser-Tabs mit verschiedenen geladenen Schriften.
Was ist eine CSS font-family-Deklaration?
Eine CSS font-family-Deklaration teilt dem Browser mit, welche Schrift mit Fallbacks verwendet werden soll. Beispiel: font-family: 'Roboto', sans-serif; — wenn Roboto nicht verfügbar ist, greift der Browser auf die Standard-Sans-Serif-Schrift des Systems zurück.