font-display-Generator
Ladeverhalten von Webfonts (font-display) vergleichen und @font-face-Code erzeugen
Dieses Tool zeigt anhand einer visuellen Zeitleiste, wie sich die CSS-Werte von font-display (auto, block, swap, fallback, optional) tatsächlich voneinander unterscheiden. Sie geben nur Schriftname und URL ein und erhalten sofort den passenden @font-face-Code mit dem gewählten Wert. Alles wird ausschließlich im Browser berechnet und nichts übertragen – hilfreich für Frontend-Entwicklerinnen und -Entwickler, die FOUT-, FOIT- und CLS-Effekte verstehen und den optimalen Wert wählen wollen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie den Namen der Schriftfamilie und die URL (oder den Pfad) zur Schriftdatei ein.
- Wählen Sie über die Reiter den font-display-Wert, den Sie vergleichen möchten: swap, block, fallback, optional oder auto.
- Sehen Sie sich Block- und Austauschphase sowie die Zeitleiste des Ladevorgangs an, um das Verhalten des Werts nachzuvollziehen.
- Kopieren Sie den darunter erzeugten @font-face-Code über die Kopieren-Schaltfläche in das CSS Ihres Projekts.
FAQ
- Welchen font-display-Wert sollte ich wählen?
- Steht die Lesbarkeit im Vordergrund, wird meist swap empfohlen; möchten Sie Layoutsprünge (CLS) möglichst vermeiden, ist optional die übliche Wahl. Vergleichen Sie die Zeitleisten und Erläuterungen im Tool und entscheiden Sie passend zu Ihrer Website.
- Kann ich den erzeugten Code unverändert übernehmen?
- Erzeugt wird eine grundlegende @font-face-Regel mit font-family, src-Pfad und dem gewählten font-display-Wert. Wenn Sie andere Schriftschnitte oder Stile einsetzen, passen Sie font-weight und font-style einfach an Ihr Projekt an.
- Wird die eingegebene Font-URL an einen Server übertragen?
- Nein. Ihre Eingaben dienen ausschließlich der Code-Erzeugung im Browser und werden nirgendwohin gesendet.