Schriftvorschau- & Paarungstool
Durchsuchen, testen und vergleichen Sie Schriften für Ihr nächstes Projekt. Wählen Sie aus Systemschriften und beliebten Google Fonts und passen Sie sie mit Echtzeit-Reglern für Größe, Schriftschnitt, Zeilenhöhe und Buchstabenabstand an. Testen Sie Paarungen aus Überschrift- und Fließtextschrift nebeneinander und erzeugen Sie einsatzbereiten CSS-Code - alles in Ihrem Browser, ohne Registrierung.
Browse system fonts and Google Fonts, preview with custom text, and compare font pairings side-by-side. Generate ready-to-use CSS code - all running locally in your browser.
Font Browser
40 fontsPreview
Inter
The quick brown fox jumps over the lazy dog.
24px / 1.5 lh / 0.0px ls · Loading...
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
font-family: 'Inter', sans-serif;
Fonts are loaded from Google Fonts CDN for accurate preview rendering. System fonts work offline. All search, filtering, and code generation runs locally. Google Fonts are licensed under the SIL Open Font License - free for commercial use.
Your font selections and settings are automatically saved.
Warum unser Schriftvorschau- & Paarungstool verwenden?
- Live-Schriftvorschau mit allen Reglern: Sehen Sie jede Schrift mit Echtzeit-Anpassung in der Vorschau - ändern Sie Schriftgröße (8-128px), Schriftgewicht (100-900), Zeilenhöhe und Buchstabenabstand und schalten Sie Kursiv um. Tippen Sie eigenen Text, um genau zu sehen, wie er in Ihrem Design wirkt. Unterstützt Systemschriften und Google Fonts mit sofortigem Webfont-Laden.
- Schriftpaarung nebeneinander: Testen Sie Kombinationen aus Überschrift- und Fließtextschrift nebeneinander, mit unabhängigen Reglern für jede Schrift. Aktivieren Sie den Vergleichsmodus, um Paarungen für Ihr Projekt fein abzustimmen. Ideal, um passende Schriften für Websites, Branding und Druckerzeugnisse auszuwählen.
- Einsatzbereites CSS und @font-face-Code: Erzeugen Sie produktionsreifen CSS-Code für jede Schrift und Paarung. Kopieren Sie @import-Regeln, <link>-Tags, CSS-Deklarationen font-family oder vollständigen @font-face-Code - alles formatiert und bereit zum Einfügen in Ihr Projekt. Kein manuelles Programmieren nötig.
- Zeichensatz und Schriftdetails: Sehen Sie den vollständigen Zeichensatz jeder Schrift mit Groß- und Kleinbuchstaben, Ziffern, Satzzeichen und Sonderzeichen. Prüfen Sie Schriftkategorie, verfügbare Gewichte und vorgeschlagenen CSS-Code. Alle Schriftdaten sind eingebettet - keine externen API-Aufrufe nötig.
Wer nutzt das Schriftvorschau- & Paarungstool?
- Webdesign und -entwicklung: Sehen Sie Schriften für Webprojekte mit Live-Reglern für Text, Größe und Gewicht in der Vorschau. Testen Sie Kombinationen aus Überschrift- und Fließtextschrift, bevor Sie ein Design festlegen. Erzeugen Sie @import- und <link>-Tags für Ihre HTML- und CSS-Dateien.
- Branding und Logodesign: Vergleichen Sie Schriftpaarungen für Projekte zur Markenidentität. Testen Sie, wie ein Markenname in verschiedenen Gewichten und Stilen wirkt. Prüfen Sie die Markentypografie mit echtem Markentext statt generischem Lorem ipsum.
- Content-Erstellung und Bloggen: Blogger und Content-Ersteller finden die perfekte Schriftkombination für ihre Seite. Prüfen Sie, wie Fließtext in Lesegröße gerendert wird, und wählen Sie eine passende Überschriftenschrift, die zum Stil Ihres Inhalts passt.
- UI/UX-Design-Prototyping: Designer testen typografische Entscheidungen für Benutzeroberflächen schnell. Stellen Sie Buchstabenabstand und Zeilenhöhe ein, um optimale Lesbarkeit auf verschiedenen Bildschirmgrößen zu gewährleisten. Kopieren Sie CSS-Deklarationen direkt in Ihren Prototyp.
- Print- und Publikationsdesign: Prüfen Sie, wie Schriften in Druckerzeugnissen wirken. Testen Sie Serif- und Sans-Serif-Paarungen für Überschriften und Fließtext. Passen Sie Größen und Gewichte an die Lesbarkeitsanforderungen im Druck an.
- CSS und Frontend-Entwicklung: Frontend-Entwickler erkunden Schriftoptionen, ohne den Browser zu verlassen. Erzeugen Sie sauberen, formatierten CSS-Code für jede Schriftauswahl. Nutzen Sie die @font-face-CSS-Ausgabe für selbst gehostete Schriften oder die CDN-Links von Google Fonts.
Häufig gestellte Fragen
Das Tool enthält Systemschriften (auf Ihrem Gerät vorinstalliert, etwa Arial, Helvetica, Georgia oder Times New Roman) und beliebte Google Fonts (etwa Roboto, Open Sans, Lato, Montserrat, Merriweather, Playfair Display, Fira Code und viele mehr). Google Fonts werden für eine originalgetreue Vorschau vom CDN von Google geladen.
Aktivieren Sie den Vergleichsmodus, um zwei Schriften mit unabhängigen Reglern für jede Schrift nebeneinander zu sehen. Wählen Sie links eine Überschriftenschrift und rechts eine Fließtextschrift, oder vergleichen Sie zwei Schriften für denselben Zweck. Jedes Feld hat eigene Regler für Größe, Schriftschnitt, Zeilenhöhe, Buchstabenabstand und eigenen Text.
Für jede Schrift erzeugt das Tool eine @import-Regel für CSS-Dateien, einen <link>-Tag für HTML-Dokumente, eine CSS-Deklaration font-family mit passenden Fallbacks und einen vollständigen CSS-Block mit allen Einstellungen. Im Paarungsmodus können Sie das CSS für beide Schriften kopieren.
Google Fonts stehen unter der SIL Open Font License (OFL), die kostenlose kommerzielle und private Nutzung erlaubt, einschließlich Websites, Apps, Druckerzeugnissen und Branding. Systemschriften haben ihre eigenen Lizenzen. Prüfen Sie für Ihren Anwendungsfall immer die konkrete Schriftlizenz.
Systemschriften funktionieren vollständig offline. Google Fonts benötigen eine Internetverbindung, um für die Vorschau vom CDN von Google geladen zu werden. Schriftbrowser, Suche und Filter funktionieren offline, da die Schrift-Metadaten im Tool eingebettet sind.
Das Schriftgewicht reicht von 100 (dünn) bis 900 (schwarz). Häufige Gewichte sind 400 (normal), 700 (fett) und 300 (leicht). Nicht jede Schrift enthält jedes Gewicht - das Tool zeigt nur die für die ausgewählte Schrift verfügbaren Gewichte.
Die Zeichensatz-Ansicht zeigt den gesamten Zeichenvorrat einer Schrift, geordnet nach Großbuchstaben, Kleinbuchstaben, Ziffern, Satzzeichen und Symbolen. So prüfen Sie, ob eine Schrift die Zeichen unterstützt, die Sie für Ihr Projekt brauchen.
Der Buchstabenabstand (Tracking) reguliert den Abstand zwischen Zeichen. Enger Buchstabenabstand lässt Überschriften kompakter wirken, größerer Abstand kann die Lesbarkeit von Fließtext verbessern. Im Tool lässt er sich von -2px bis +5px einstellen.
Ja. Ihre Schriftauswahl, Ihr eigener Text, Größe, Schriftgewicht, Zeilenhöhe und Vergleichsmodus werden automatisch im localStorage Ihres Browsers gespeichert. Es werden niemals Daten an einen Server gesendet oder extern gespeichert.
Kopieren Sie die @import-Regel an den Anfang Ihrer CSS-Datei oder kopieren Sie den <link>-Tag und fügen ihn in den <head> Ihres HTML ein. Die CSS-Deklaration font-family lässt sich auf jedes Element anwenden. Für selbst gehostete Schriften nutzen Sie den vollständigen CSS-Block @font-face.