Web-Font-Vorschau
Google Fonts vergleichen & CSS sofort generieren
Vorschaueinstellungen
Über die Web-Font-Vorschau
Die Web-Font-Vorschau ist ein Online-Tool, mit dem Sie verschiedene Schriftarten von Google Fonts direkt in Ihrem Browser prüfen und vergleichen können.
In diesem Tool können Sie Schriftstärke, Größe und Zeilenhöhe fein abstimmen. Darüber hinaus werden CSS-Code und HTML-Tags automatisch generiert.
Alle eingegebenen Texte werden vollständig in Ihrem Browser verarbeitet und niemals an einen Server gesendet.
So verwenden Sie das Tool
Text und Stile festlegen
Geben Sie zunächst den gewünschten Text im Einstellungsfeld oben ein. Passen Sie dann die Schriftgröße und Zeilenhöhe mit den Schiebereglern an.
Schriftarten auswählen und vergleichen
Erhöhen Sie die Anzahl der Vergleichsplätze auf bis zu 4. Wählen Sie eine Kategorie und eine Schriftart aus dem Dropdown-Menü.
Code kopieren und implementieren
Wenn Sie die perfekte Schriftart gefunden haben, überprüfen Sie den Code-Bereich unten. Wählen Sie "CSS", "<link>" oder "@import" aus und kopieren Sie den Code.
Web-Font-Glossar
- Web Fonts
- Technologie zur Anzeige von Schriftarten durch Herunterladen von Schriftartdaten von einem Server oder CDN.
- Google Fonts
- Kostenloser Open-Source-Web-Font-Dienst von Google.
- font-family
- Eigenschaft in CSS, um die Schriftart für Text anzugeben.
- FOUT / FOIT
- Anzeigeprobleme, die beim Laden von Web-Fonts auftreten.
- Schriftstärke
- Gibt die Dicke einer Schriftart an, von 100 bis 900.
Häufig gestellte Fragen
- Q.Beeinflussen japanische Schriftarten die Ladegeschwindigkeit?
- Ja, die Dateigröße ist aufgrund der vielen Zeichen größer. Google Fonts verwendet jedoch dynamisches Subsetting.
- Q.Welche Schriftkombinationen (Pairings) empfehlen Sie?
- Ein klassischer Ansatz ist eine Serifenschrift für Überschriften und eine gut lesbare Sans-Serif-Schrift für Fließtext.
- Q.Sind meine eingegebenen Textdaten sicher?
- Ja, völlig sicher. Dieses Tool läuft ausschließlich in Ihrem Browser.
- Q.Wie kann ich FOUT und FOIT verhindern?
- Durch Angabe von `font-display: swap;` innerhalb von @font-face im CSS.
- Q.Ist die kommerzielle Nutzung erlaubt?
- Die geladenen Google Fonts sind Open Source und im Allgemeinen für kommerzielle und nichtkommerzielle Zwecke kostenlos.
Anwendungsfälle
Prototyping von Webdesigns
Prüfen Sie die Atmosphäre einer Schriftart intuitiv im Browser ohne zusätzliche Designtools.
Typografie-Feinabstimmung
Entwickler können Dicke und Zeilenhöhe anpassen, um optimale CSS-Werte abzuleiten.
Prüfung vor Präsentationen
Bewerten Sie objektiv, welche Schriftart Ihre Botschaft am besten vermittelt, bevor Sie Canva oder PowerPoint verwenden.
Schriftkombination
Prüfen Sie, ob eine dekorative Schrift für Überschriften und eine lesbare Schrift für den Text zusammenpassen.
Feedback senden
Bitte teilen Sie uns Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.