font-display Code-Generator
CSS font-display Werte vergleichen und @font-face Code erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool lässt sich visuell auf einer Zeitachse vergleichen, wie sich die CSS-font-display-Werte (auto, block, swap, fallback, optional) beim Laden von Schriftarten verhalten. Einfach Font-Familie und Font-URL eingeben, und das passende @font-face-Snippet wird sofort erstellt. Da alles nur lokal im Browser läuft und nichts an einen Server gesendet wird, eignet es sich gut für Frontend-Entwickler, die FOUT, FOIT oder Layout-Verschiebungen (CLS) vermeiden möchten.
Anleitung
- Font-Familienname und die URL bzw. den Pfad der Schriftdatei eingeben.
- Über die Tabs einen font-display-Wert auswählen: swap, block, fallback, optional oder auto.
- Block- und Swap-Zeitraum sowie die visuelle Ladezeitleiste prüfen, um das Verhalten zu verstehen.
- Das automatisch erzeugte @font-face-Snippet über den Kopieren-Button kopieren und in das eigene CSS einfügen.
FAQ
- Welchen font-display-Wert sollte ich wählen?
- swap wird oft gewählt, wenn Lesbarkeit im Vordergrund steht, während optional häufig empfohlen wird, um Layout-Verschiebungen (CLS) zu minimieren. Vergleiche Zeitachsen und Beschreibungen im Tool, um den passenden Wert zu finden.
- Kann ich den generierten Code direkt verwenden?
- Es wird eine einfache @font-face-Regel mit deiner Font-Familie, dem src-Pfad und dem gewählten font-display-Wert erstellt. Passe font-weight oder font-style an, falls du andere Schnitte brauchst.
- Wird die eingegebene Font-URL irgendwohin gesendet?
- Nein. Deine Eingabe wird nur lokal zur Code-Erstellung verwendet und niemals übertragen.