font-display und das Laden von Webfonts

Der Lighthouse-Befund Text bleibt während des Ladens der Webfonts sichtbar erscheint, wenn eine Seite eine Webschrift einsetzt, ohne dem Browser zu sagen, was er anzeigen soll, solange die Schriftdatei noch lädt. Standardmäßig blenden die meisten Browser den Text bis zu drei Sekunden lang aus und fallen dann auf eine Ersatzschrift zurück. Ein Besucher mit langsamer Verbindung sieht so lange eine Leerstelle, wo die Überschrift stehen sollte. Der Deskriptor font-display behebt das mit einer Zeile. Unbedacht eingesetzt tauscht die Lösung aber unsichtbaren Text gegen einen sichtbaren Sprung, wenn die echte Schrift eintrifft. Dieser Ratgeber erklärt die Werte, das Vorabladen und den Trick mit der Schriftgröße, der beide Probleme vermeidet.

Was beim Laden einer Webschrift passiert

Der Browser entdeckt die Schriftdatei erst, nachdem er das CSS geparst hat, das sie referenziert. Die Schrift gehört deshalb immer zu den letzten kritischen Ressourcen, die eintreffen. Während er wartet, muss er sich entscheiden: Text in einer Ersatzschrift rendern (und später neu rendern) oder gar nichts rendern. font-display steuert diese Entscheidung je @font-face-Regel:

Wert	Blockphase	Tauschphase	Wirkung
auto	Browserstandard	Browserstandard	meist wie block: Text bis zu drei Sekunden unsichtbar
block	kurz (etwa drei Sekunden)	unbegrenzt	Text unsichtbar, dann getauscht, sobald die Schrift eintrifft
swap	keine	unbegrenzt	Ersatzschrift sofort, getauscht, sobald die Schrift eintrifft
fallback	sehr kurz (etwa 100 ms)	kurz (etwa drei Sekunden)	Ersatzschrift fast sofort; verspätete Schriften werden nicht mehr eingetauscht
optional	sehr kurz	keine	die Schrift wird nur genutzt, wenn sie schon verfügbar ist; sonst bleibt die Ersatzschrift

Lighthouse meldet @font-face-Regeln mit auto oder block oder ganz ohne Deskriptor. swap, fallback und optional bestehen die Prüfung.

Welcher Wert passt

• swap ist die übliche Empfehlung und der Standard der meisten Schriftdienste. Text ist sofort lesbar. Der Preis ist ein sichtbarer Tausch, wenn die Schrift eintrifft, und der zählt als Layout-Verschiebung, wenn Ersatz- und Webschrift unterschiedlich groß sind.
• optional ist die strengste Wahl für die Performance: kein Tausch, keine Verschiebung, und die Schrift liegt für den nächsten Seitenaufruf im Cache. Für Fließtext auf inhaltsreichen Seiten passt das gut. Beim allerersten Besuch kann die Markenschrift fehlen.
• fallback liegt dazwischen und eignet sich für Zweitschriften, die schön, aber nicht zwingend sind.
• block ist nur für Icon-Fonts vertretbar, wo Ersatzzeichen sinnlose Buchstaben zeigen würden. Selbst dort ist Inline-SVG die bessere Lösung.

So beheben Sie den Befund

1. Selbst gehostete Schriften: Deskriptor ergänzen

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

Nutzen Sie ausschließlich WOFF2; jeder aktuelle Browser unterstützt es, und es ist das kleinste Format. Eine variable Schrift ersetzt mehrere Dateien je Schriftschnitt durch eine einzige.

2. Google Fonts: display-Parameter ergänzen

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Ohne &display=swap nutzt das erzeugte CSS den Standard, und Lighthouse meldet den Befund. Besser noch: Laden Sie die Schriftdateien herunter und hosten Sie sie selbst. Das entfernt zwei externe Ursprünge vom kritischen Pfad und gibt Ihnen die Kontrolle über das Caching. Der Preconnect-Ratgeber beschreibt die Zwischenlösung mit einem Preconnect zu fonts.gstatic.com.

3. Die Schriften des sichtbaren Bereichs vorab laden

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

Das Vorabladen startet den Download, bevor das CSS geparst ist. Das verkürzt die Tauschphase, und oft trifft die Schrift vor dem ersten Paint ein. Laden Sie nur die ein bis zwei Dateien vorab, die der erste Bildschirm braucht; jeder Preload konkurriert mit dem LCP-Bild.

4. Ersatzschrift anpassen, damit nichts springt

Nicht der Tausch selbst ist das Problem, sondern der Größenunterschied zwischen Ersatz- und Webschrift. Rendert die Ersatzschrift breiter oder höher, umbricht jede Zeile anders und die ganze Seite springt, was sich im Cumulative Layout Shift zeigt. Die Deskriptoren size-adjust, ascent-override, descent-override und line-gap-override stimmen eine lokale Ersatzschrift auf dieselben Maße ab:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: "Inter", "Inter Fallback", sans-serif; }

Die passenden Prozentwerte hängen vom Schriftpaar ab. Es gibt Werkzeuge, die sie aus den Schriftdateien berechnen, und Frameworks wie Next.js erzeugen diesen Block mit next/font automatisch.

5. Schriften beschränken und untersetzen

Eine Schriftfamilie mit vier Schnitten in zwei Stilen sind acht Dateien. Die meisten Seiten brauchen zwei. Beschränken Sie den Zeichenvorrat auf das Nötige (etwa nur lateinische Zeichen) und nutzen Sie, wo verfügbar, eine variable Schrift. Weniger und kleinere Dateien bedeuten eine kürzere Tauschphase, unabhängig vom gewählten Wert.

Hinweise je Plattform

• WordPress: Block-Themes bündeln Schriften lokal und setzen font-display: swap. Themes und Plugins, die Google Fonts über ein eigenes Stylesheet laden, sind die übliche Quelle des Befunds; viele bieten eine Option für font-display oder lokale Schriften.
• Shopify: Schriften aus der Shopify-Schriftbibliothek liefert die Plattform mit font-display: swap aus. Befunde stammen hier typischerweise von Apps oder eigenen Schriften im Theme.
• Next.js: next/font hostet selbst, lädt vorab, setzt font-display und erzeugt eine größenangepasste Ersatzschrift. Ein manuelles @font-face daneben ist fast immer ein Überbleibsel.

Häufige Fragen

Ist font-display: swap immer die beste Wahl?

Es ist der sichere Standard für die Lesbarkeit. Für Fließtext auf Inhaltsseiten vermeidet optional den Tausch und jede Layout-Verschiebung, mit dem Risiko, beim ersten Besuch die Ersatzschrift zu zeigen.

Verursacht font-display: swap Layout-Verschiebungen?

Das kann passieren, wenn die Ersatzschrift andere Maße hat. Eine mit size-adjust und den Override-Deskriptoren angepasste Ersatzschrift beseitigt die Verschiebung.

Warum erscheint der Befund weiter, obwohl ich display=swap bei Google Fonts gesetzt habe?

Vermutlich lädt ein weiteres Stylesheet Schriften ohne den Parameter, oft aus einem Theme, einem Plugin oder einem eingebetteten Widget. Der Befund nennt die genauen Schrift-URLs.

Soll ich alle Schriften vorab laden?

Nein. Laden Sie die ein bis zwei Dateien des sichtbaren Bereichs vorab. Mehr Preloads verzögern das LCP-Bild und das CSS.