Sieh mit einem Zeitleisten-Simulator, was jeder font-display-Wert bewirkt. Dann nutze Preload und Preconnect, teile Schriften mit unicode-range auf und passe die Metriken des Fallbacks an, um Layout-Verschiebungen zu vermeiden.
Schnelles Laden von Schriften läuft auf vier Schritte hinaus: Teile dem Browser früh mit, dass es die Schrift gibt (Preconnect oder Preload), liefere kleine WOFF2-Dateien mit nur den Zeichen, die du brauchst, wähle einen font-display-Wert, der zum Text passt, und passe die Größe der Fallback-Schrift an, damit nichts springt. Nutze font-display: optional, wenn es dir vor allem darum geht, Layout-Verschiebungen zu vermeiden.
font-display-Werte im Überblick
Wert
Text während des Ladens
Schrift kommt spät an
Geeignet für
Fallback fast sofort
Wird immer eingewechselt
Fließtext, der sofort sichtbar sein muss
Fallback fast sofort
Wird nicht eingewechselt; Fallback bleibt
Geringste Layout-Verschiebung
Fallback fast sofort
Wird nur innerhalb von etwa 3s eingewechselt
Ein Mittelweg
Bis zu etwa 3s unsichtbar
Wird immer eingewechselt
Icon-Fonts, als Schrift gesetzte Logos
Browser entscheidet
Browser entscheidet
Dem Browser die Wahl lassen
Schriften gehören zu den wenigen Ressourcen, die deinen Text verstecken oder das Layout verschieben können. Ziehe den Regler unten, um festzulegen, wie lange eine Schrift zum Laden braucht, und sieh, was jeder font-display-Wert in jedem Moment anzeigt. Kopiere dann die Lademuster, die Seiten stabil halten.
Stelle den Regler auf die Zeit, die deine Schrift bei einer langsamen Verbindung zum Herunterladen braucht.
Lies jede Zeile: Grau ist unsichtbarer Text, Bernstein die Fallback-Schrift, Blau der Webfont.
Achte darauf, welche Werte die Schrift spät wechseln. Bei einem späten Wechsel bricht sichtbarer Text neu um.
Kopiere die Snippets für Preload, Teilmengen mit unicode-range und angepasste Fallbacks.
Selbst gehostete Schriften: Schreibe die @font-face-Regeln inline in den head, damit der Browser sie findet, ohne auf ein weiteres Stylesheet zu warten.
Preloade nur ein oder zwei kritische Dateien. Wenn du jede Schriftstärke preloadest, konkurriert das mit deinen Bildern und Skripten.
Füge einem Font-Preload immer crossorigin hinzu, auch für Dateien auf deiner eigenen Domain, sonst lädt der Browser die Datei doppelt.
Liefere WOFF2 aus. Es komprimiert besser als WOFF, und jeder aktuelle Browser kann es lesen.
Setze ans Ende jeder font-family-Liste eine sinnvolle generische Familie, damit Text auch dann angezeigt wird, wenn der Download fehlschlägt.
Häufige Fragen
Was bewirkt font-display: swap?
Es gibt der Schrift eine extrem kurze Block-Phase, die laut CSS-Fonts-Spezifikation höchstens 100ms dauern sollte, und eine unbegrenzte Swap-Phase. Text erscheint fast sofort in der Fallback-Schrift und wechselt zum Webfont, sobald dieser fertig geladen ist.
Ist font-display: swap schlecht für CLS?
Das kann passieren. Wenn Fallback und Webfont unterschiedliche Breiten oder Zeilenhöhen haben, verschiebt der späte Wechsel den Text und alles darunter. Behebe das mit size-adjust und den Overrides für ascent, descent und line-gap beim Fallback, oder nutze optional.
Warum wird meine vorgeladene Schrift zweimal heruntergeladen?
Schriften werden im anonymen CORS-Modus abgerufen, daher braucht der Preload-Link das Attribut crossorigin, selbst wenn die Datei auf demselben Origin liegt. Ohne das passt der Preload nicht zur echten Anfrage, und die Schrift wird erneut geladen.
Sollte ich Google Fonts preloaden?
Meist nicht. web.dev warnt, dass Preloading einen Teil der browsereigenen Inhaltsaushandlung umgeht, darunter unicode-range, sodass du womöglich eine Teilmenge lädst, die die Seite nie nutzt. Nutze stattdessen Preconnect zu fonts.googleapis.com und fonts.gstatic.com, oder hoste selbst und preloade deine eigene Datei.
Wie spart unicode-range Bytes?
Wenn eine @font-face-Regel eine unicode-range hat, lädt der Browser diese Datei nur herunter, wenn die Seite mindestens ein Zeichen aus dem Bereich verwendet. Teile eine Schrift in lateinische, kyrillische oder griechische Dateien auf, dann lädt jeder Besucher nur die Schriftsysteme, die auf der Seite vorkommen.
Die Zeitleiste der Schriftanzeige
Wenn Text eine Schrift braucht, die noch nicht angekommen ist, durchläuft der Browser bis zu drei Phasen. In der Block-Phase setzt er den Text mit einem unsichtbaren Fallback. In der Swap-Phase zeigt er den Fallback und wechselt, sobald die Schrift da ist. Danach folgt die Failure-Phase, in der der Fallback endgültig bleibt.
font-display ändert nur, wie lange die ersten beiden Phasen dauern. Die Werte im Simulator sind die, die der Entwurf von CSS Fonts Level 4 empfiehlt; Browser können leicht abweichende Zeiten verwenden.
Auch unsichtbarer Text nimmt Platz ein, gemessen mit der Fallback-Schrift. Wenn die echte Schrift ihn ersetzt, kann jede Zeile breiter oder schmaler werden, Absätze brechen neu um und alles darunter verschiebt sich. Diese Bewegung zählt in den Cumulative Layout Shift.
Es gibt zwei Abhilfen. Vermeide den späten Wechsel ganz mit optional, oder lass den Fallback mit size-adjust und den Deskriptoren zum Überschreiben der Metriken auf einer local()-Fallback-Schrift denselben Platz einnehmen wie den Webfont.
Subsetting
Eine Schrift mit Tausenden Glyphen ist Verschwendung für eine Seite, die hundert davon nutzt. Subsetting-Tools entfernen ungenutzte Zeichen, bevor du die Datei hochlädst, und unicode-range lässt den Browser ganze Dateien überspringen, die er nicht braucht.
Für ein kurzes Stück Display-Text akzeptiert die Google Fonts API einen text=-Parameter und liefert eine Datei mit genau diesen Zeichen. Das ist praktisch für ein Logo oder eine einzelne Überschrift in einer dekorativen Schrift.
Selbst gehostete Schrift mit Preload
Die eine Datei preloaden, die der erste Bildschirm braucht
as, type und crossorigin müssen alle vorhanden sein. Die @font-face-Regel steht inline im head, damit sie sofort entdeckt wird.
Dateien mit unicode-range aufteilen
Lateinische und kyrillische Teilmengen einer Familie
Beide Regeln teilen sich einen Familiennamen. Eine Seite, die nur auf Englisch geschrieben ist, lädt die kyrillische Datei nie herunter.
Ein passend dimensionierter Fallback
Angepasster lokaler Fallback gegen Layout-Verschiebungen
Die Zahlen sind Platzhalter: Miss deine eigene Schrift gegen den Fallback und justiere sie, bis beide übereinstimmen.
Google Fonts mit Preconnect und einer Teilmenge für eine Überschrift
Das zweite Stylesheet fragt nur die Buchstaben des Logo-Texts an, wodurch diese Datei winzig bleibt.
Extrem kurze Block-Phase (100ms oder weniger), unbegrenzte Swap-Phase
Extrem kurze Block-Phase, kurze Swap-Phase (3s empfohlen)
Extrem kurze Block-Phase, keine Swap-Phase
Simulator für die font-display-Zeitleiste
Ausgangsansicht: Die Schrift braucht 1.5 Sekunden zum Laden; ziehe den Regler, um das zu ändern. Grau ist unsichtbarer Text, Bernstein der Fallback, Blau der Webfont.
Schrift kommt nach {n}s an
Webfont wird bei diesem Seitenaufruf nicht verwendet
Sichtbarer Wechsel: Text kann neu umbrechen
Kein sichtbarer Wechsel
Skala: 0 bis 5 Sekunden. Bei optional erlaubt die Spezifikation dem Browser, einen späten Download abzubrechen oder mit sehr niedriger Priorität abzuschließen.