CSS font-display und Layout Shift — CLS in Core Web Vitals reduzieren

1. Wie Webfonts den CLS-Score verschlechtern

Der Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals-Metriken, die Google in sein Ranking-Signal einfließen lässt. Er misst, wie stark sich sichtbare Elemente einer Seite während des Ladens unerwartet verschieben. Webfonts sind eine der häufigsten Ursachen: Wenn der Browser zuerst einen Systemfont anzeigt und dann auf den geladenen Webfont umschaltet, können Textblöcke je nach Schriftmetrik signifikant anders groß sein. Ein Paragraph, der in der Fallback-Schrift drei Zeilen benötigt, kann im Webfont plötzlich vier Zeilen brauchen — was alle folgenden Elemente nach unten verschiebt und einen messbaren Layout Shift erzeugt.

Der Schweregrad des Problems hängt von mehreren Faktoren ab: wie lange der Webfont lädt (Netzwerkbedingungen), wie sehr sich Webfont und Fallback-Font in ihren Metriken unterscheiden (Buchstabenbreite, Zeilenhöhe, Ober- und Unterlängen), und wie früh im Lade-Prozess der Schriftwechsel stattfindet. CSS font-display ist die primäre Stellschraube für den Zeitpunkt des Schriftwechsels. CSS size-adjust und die Metric-Override-Eigenschaften steuern den visuellen Unterschied zwischen Fallback und Webfont — und damit direkt die Größe des Layout Shifts.

2. font-display: auto — das Standardverhalten

Ohne explizite CSS font-display-Deklaration verhält sich der Browser nach seinem eigenen Ermessen. In Chrome und Safari entspricht das einem kurzen Block-Zeitraum (etwa 3 Sekunden), in dem die Schrift unsichtbar ist, gefolgt von einem Swap-Zeitraum. Dieses Verhalten ist inkonsistent zwischen Browsern und hat sich über Browser-Versionen geändert. Es ist das Standardverhalten, aber kaum je das gewollte — weshalb explizite font-display-Werte in jedem professionellen Projekt gesetzt werden sollten.

Das Sichtbarkeits-Konzept bei font-display dreht sich um zwei Phasen: den Block-Zeitraum (in dem Text unsichtbar oder mit einem temporären Fallback angezeigt wird) und den Swap-Zeitraum (in dem der Browser nach erfolgreichem Font-Laden den Schriftwechsel durchführt). Wenn der Swap-Zeitraum verstreicht ohne dass die Schrift geladen ist, bleibt der Fallback-Font dauerhaft. Diese Konzepte sind die Grundlage für alle font-display-Werte.

3. font-display: swap — sofort sichtbar, später ausgetauscht

font-display: swap ist der meistverwendete Wert und gibt dem Text sofortige Sichtbarkeit. Es gibt keinen Block-Zeitraum: Der Browser zeigt den Fallback-Font sofort an und tauscht ihn gegen den Webfont aus, sobald dieser geladen ist — ohne zeitliches Limit für den Swap. Das bedeutet: Auch wenn der Webfont erst nach 10 Sekunden lädt, wird er noch eingesetzt. Das ist gut für wahrgenommene Performance (kein unsichtbarer Text), aber problematisch für Layout Shift: Jedes Mal, wenn der Swap stattfindet, kann es zu Verschiebungen kommen.

Für CLS ist font-display: swap nur dann gut, wenn der Webfont sehr schnell lädt (vor dem FCP) oder wenn Fallback- und Webfont sehr ähnliche Metriken haben. In Kombination mit CSS size-adjust — das die Fallback-Schrift in ihrer Größe an den Webfont angleicht — lässt sich der Layout Shift erheblich reduzieren. Für Google Fonts-Einbindungen über die Embed-URL ist &display=swap als URL-Parameter das Äquivalent zu font-display: swap in der CSS-Deklaration.

/* Self-hosted font with font-display: swap */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;   /* Show fallback immediately, swap when loaded */
  src:
    url('/fonts/inter-regular.woff2') format('woff2'),
    url('/fonts/inter-regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}

@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-bold.woff2') format('woff2');
}

/* Fallback stack: system fonts close to Inter's metrics */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

4. font-display: optional — CLS-sicherstes Verhalten

font-display: optional ist der Wert mit dem geringsten Risiko für Layout Shift. Es gibt einen sehr kurzen Block-Zeitraum (etwa 100ms), und wenn der Font bis dahin nicht geladen ist, wird er für den aktuellen Seitenbesuch komplett nicht verwendet — auch wenn er später ankommt. Das verhindert jeglichen Schriftwechsel nach dem initialen Render und damit jeden font-bedingten Layout Shift. Der Webfont wird im Browser-Cache gespeichert und beim nächsten Besuch sofort eingesetzt.

Der Kompromiss bei CSS font-display: optional ist, dass Nutzer beim ersten Besuch immer den Fallback-Font sehen, wenn die Verbindung nicht sehr schnell ist. Für das Design kann das relevant sein — besonders wenn der Webfont ein wesentlicher Teil der Markenidentität ist. Für Performance-orientierte Projekte, bei denen CLS-Optimierung Priorität hat, ist optional die sicherste Wahl. In Kombination mit Preloading — das den Font lädt, bevor er benötigt wird — erhöht sich die Chance, dass der Font beim ersten Visit innerhalb des 100ms-Fensters verfügbar ist.

5. font-display: fallback — der Mittelweg

font-display: fallback kombiniert einen kurzen Block-Zeitraum (etwa 100ms) mit einem begrenzten Swap-Zeitraum (etwa 3 Sekunden). Wenn der Font innerhalb von 100ms nicht verfügbar ist, wird der Fallback angezeigt. Wenn er dann innerhalb von 3 Sekunden lädt, findet der Swap statt. Wenn er nach 3 Sekunden noch nicht da ist, bleibt der Fallback dauerhaft und der Font wird für diesen Seitenbesuch nicht mehr verwendet — auch wenn er danach ankommt.

Dieses Verhalten reduziert das Risiko von späten Layout Shifts erheblich: Ein Font, der erst nach 5 Sekunden lädt (schlechte Verbindung), wird mit fallback nicht mehr eingesetzt und erzeugt keinen Shift. Mit swap würde er noch immer getauscht. Das macht CSS font-display: fallback zu einem guten Kompromiss für Projekte, die Design-Konsistenz bei guten Verbindungen wollen, aber keine späten Shifts bei schlechten Verbindungen akzeptieren können.

/* font-display: optional — zero layout shift risk */
@font-face {
  font-family: 'InterDisplay';
  font-weight: 300 900;   /* Variable font range */
  font-display: optional;
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}

/* Adjusted fallback font to minimize visual difference */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  /* size-adjust compensates for Inter vs Arial metric differences */
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Use adjusted fallback in font stack */
.page-text {
  font-family: 'InterDisplay', 'InterFallback', Arial, sans-serif;
  /* When InterDisplay loads, the visual shift is minimal */
}

6. size-adjust — den Layout Shift minimieren

CSS size-adjust ist der Schlüssel zur Minimierung des Layout Shifts bei Schriftwechseln. Die Eigenschaft skaliert die Glyphen einer Schrift um einen Prozentsatz — und wenn sie auf einen künstlichen Fallback-Font-Face angewendet wird, lassen sich die Metriken so anpassen, dass Fallback und Webfont praktisch identische Textblockgrößen erzeugen. Das Ergebnis: Der Swap findet statt, aber ohne sichtbare Verschiebung, weil der Fallback-Font durch size-adjust fast die gleiche Größe einnimmt wie der Webfont.

Das Vorgehen: Einen neuen @font-face-Block für den angepassten Fallback anlegen, der local('Arial') (oder eine andere systemseitig verfügbare Schrift) referenziert und über size-adjust skaliert wird. Den korrekten Wert findet man empirisch oder mit Tools wie Font Style Matcher oder dem open-source fontaine-Paket, das die Metriken automatisch berechnet und passende Override-Werte generiert. Typische size-adjust-Werte liegen zwischen 95% und 115%, abhängig von der Schrift-Kombination.

/* Technique: adjusted fallback that matches webfont metrics */

/* Step 1: Declare the webfont */
@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-variable.woff2') format('woff2-variations');
}

/* Step 2: Create adjusted fallback matching Geist's metrics */
@font-face {
  font-family: 'GeistFallback';
  src: local('Arial');
  /* These values minimize layout shift between Arial and Geist */
  size-adjust: 105.2%;
  ascent-override: 86.7%;
  descent-override: 21.9%;
  line-gap-override: 0%;
}

/* Step 3: Fallback first in font stack */
.content {
  font-family: 'Geist', 'GeistFallback', Arial, sans-serif;
}

/* Optional: font-display: optional for zero-risk performance */
@font-face {
  font-family: 'GeistOptional';
  font-weight: 100 900;
  font-display: optional;   /* No late swap, cached for next visit */
  src: url('/fonts/geist-variable.woff2') format('woff2-variations');
}

7. ascent-, descent-, line-gap-override

Neben CSS size-adjust gibt es drei weitere Metric-Override-Eigenschaften: ascent-override, descent-override und line-gap-override. Diese steuern spezifische vertikale Metriken der Schrift: ascent-override gibt an, wie weit Buchstaben über die Baseline hinausragen, descent-override wie weit sie darunter reichen, und line-gap-override steuert den Abstand zwischen den Zeilen. Zusammen bestimmen diese drei Metriken die Zeilenhöhe und damit die Gesamthöhe von Textblöcken.

Wenn size-adjust die horizontale Größe der Glyphen anpasst, passen diese drei Eigenschaften die vertikale Metrik an. Für präzise Layout-Shift-Minimierung müssen oft alle vier Eigenschaften gemeinsam kalibriert werden. Das fontaine-Paket (npm) automatisiert diese Berechnung und gibt fertige @font-face-Blöcke für den angepassten Fallback aus. Für Next.js und Nuxt.js gibt es integrierte Unterstützung über next/font bzw. @nuxtjs/fontaine, die diese Technik automatisch auf die konfigurierten Webfonts anwenden.

8. font-display-Werte im Vergleich

Die Wahl des richtigen font-display-Werts hängt vom Projekt, dem Font-Hosting und der Priorität zwischen Design-Konsistenz und Performance ab.

Für die meisten modernen Projekte mit selbst-gehosteten Webfonts ist die Kombination empfehlenswert: font-display: optional oder fallback als Basis, ergänzt durch size-adjust-angepasste Fallback-Fonts. Wer Google Fonts nutzt, hat mit &display=swap&display=optional keinen Einfluss auf size-adjust — hier ist Self-Hosting die bessere Wahl für vollständige Kontrolle über den Layout Shift.

9. Preload und Performance-Strategie

Preloading ist die ergänzende Technik zu CSS font-display: Mit einem <link rel="preload" as="font">-Tag im <head> beginnt der Browser so früh wie möglich mit dem Font-Download — noch bevor das CSS geparst wird. Das erhöht die Wahrscheinlichkeit, dass der Font beim ersten Render verfügbar ist. Bei font-display: optional ist Preloading besonders wichtig, da der Font innerhalb von ~100ms geladen sein muss, um beim ersten Visit eingesetzt zu werden.

Die vollständige Strategie für maximale Performance und minimalen Layout Shift: Fonts selbst hosten (keine externe Domain), die wichtigste Schrift (Regular Weight) preloaden, font-display: optional für CLS-sicheres Verhalten setzen und size-adjust-angepasste Fallbacks deklarieren. Für die Messung: Lighthouse gibt den CLS-Score und zeigt Webfont-bedingte Shifts an. CrUX (Chrome User Experience Report) zeigt die echten Nutzerdaten über Search Console und PageSpeed Insights.

/*
 * In HTML <head>: preload the most important font file
 * <link rel="preload" href="/fonts/inter-400.woff2" as="font"
 *       type="font/woff2" crossorigin="anonymous">
 *
 * Only preload fonts that are used above-the-fold
 * Too many preloads compete for bandwidth
 */

/* Complete self-hosting setup for zero CLS */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  /* Subset for Latin characters only — reduces file size */
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Size-adjusted Arial as fallback — matches Inter metrics */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Variable font: single file covers all weights */
@font-face {
  font-family: 'InterVariable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}

:root {
  --font-body: 'Inter', 'InterFallback', Arial, sans-serif;
  --font-display: 'InterVariable', 'InterFallback', Arial, sans-serif;
}

10. Zusammenfassung

Webfont-bedingter Layout Shift ist mit den richtigen CSS-Werkzeugen auf nahezu null reduzierbar. font-display steuert den Zeitpunkt des Schriftwechsels: swap für sofortige Sichtbarkeit ohne Zeitlimit, fallback für begrenzten Swap-Zeitraum, optional für vollständigen Verzicht auf späte Swaps. size-adjust kalibriert Fallback-Fonts so, dass sie die gleiche Textblockgröße erzeugen wie der Webfont — der Wechsel findet dann visuell nahtlos statt.

Die empfohlene Kombination für Core-Web-Vitals-kritische Projekte: Webfonts selbst hosten, wichtigste Schrift preloaden, font-display: optional oder fallback setzen, size-adjust-angepasste Fallback-Deklarationen mit lokalen Systemfonts anlegen. Mit dem fontaine-Paket oder next/font lässt sich dieses Setup automatisieren. Das Ergebnis sind konsistente Layouts ohne sichtbaren Layout Shift — auch beim ersten, ungecachten Seitenaufruf.

11. FAQ: CSS font-display und Layout Shift