So behebst du Font Layout Shift
Springt oder verändert sich dein Text beim Laden einer Seite, liegt das vermutlich daran, dass deine Webfont eine Fallback-Schrift mit anderer Größe ersetzt. Mit ein paar Zeilen CSS lässt sich dieser Sprung deutlich verringern.
Was passiert da?
Es gibt zwei typische Effekte. Beim Flackern unsichtbaren Textes (FOIT) bleibt der Text leer, bis die Schrift ankommt. Beim Flackern ungestylten Textes (FOUT) erscheint zuerst eine Fallback-Schrift, die dann ausgetauscht wird. Sind die beiden Schriften unterschiedlich groß, brechen Zeilen anders um und der Inhalt verschiebt sich. Diese Verschiebung zählt zum Cumulative Layout Shift (CLS), einem der Core Web Vitals von Google.
Wähle einen font-display-Wert
- swap zeigt Text sofort an und tauscht ihn aus, sobald die Schrift bereit ist. Das ist die gängige Wahl, kann aber eine Verschiebung verursachen.
- optional verwendet deine Schrift nur, wenn sie sehr schnell ankommt. So vermeidest du einen späten Austausch, was sich für Fließtext auf geschwindigkeitsorientierten Seiten eignet.
- fallback liegt dazwischen, mit kurzer Wartezeit und einem begrenzten Zeitfenster für den Austausch.
Passe deine Fallback-Schrift an
Das ist die wirksamste Lösung. Du erstellst eine Fallback-Schrift auf Basis einer Systemschrift, die so skaliert wird, dass sie etwa den gleichen Platz einnimmt wie deine Webfont. Beim Austausch verschiebt sich dann kaum noch etwas:
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
size-adjust: 104%;
ascent-override: 96%;
descent-override: 28%;
line-gap-override: 0%;
}
body {
font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}Du musst diese Werte nicht selbst berechnen. Öffne im Webfont Generator den Bereich CSS, wähle eine passende Fallback-Schrift, und das Tool misst deine Schrift und schreibt die Regel für dich.
Weitere hilfreiche Maßnahmen
- Lade deine Hauptschrift vorab (Preload), damit sie möglichst schon vor dem ersten Paint verfügbar ist.
- Halte die Schriftdateien klein, wie in unserem Leitfaden zu schnelleren Webfonts beschrieben.
- Vermeide gemischte Quellen. Wenn du Schriften von deiner eigenen Domain ausliefern, entfällt eine zusätzliche Verbindung.
Prüfe deinen Score
Führe den Page Speed Test aus und schau dir den CLS-Wert an. Ein guter Wert liegt bei 0,1 oder darunter. Um den Austausch selbst zu sehen, drosselst du in den Entwicklertools deines Browsers die Verbindung und lädst die Seite neu.
