Geschwindigkeit
Webfonts ohne font-display — Text bleibt beim Laden unsichtbar
Woran du es erkennst
Die CSS-Dateien definieren @font-face-Regeln ohne font-display-Deskriptor, sodass Browser den Text während des Font-Downloads verstecken (Flash of Invisible Text).
Warum es zählt
Bis zu mehreren Sekunden unsichtbarer Text liest sich wie eine kaputte Seite: Besucher sehen ein fertig aussehendes Layout ohne ein einziges Wort und springen ab, obwohl die Seite technisch lädt.
So behebst du es
- Ergänze in jeder @font-face-Regel font-display: swap, damit sofort ein Systemfont gezeigt und nach dem Laden getauscht wird.
- Nutze für unkritische Zierschriften font-display: optional — der Browser lässt den Text dann komplett im Fallback-Font, statt spät umzuschalten (vermeidet zusätzlich Layout-Shift).
- Reduziere die Zahl der Font-Dateien (Variable Fonts, nur benötigte Schnitte/Subsets per unicode-range) und lade die wichtigste Datei mit <link rel="preload" as="font" crossorigin> vor.
- Prüfe nach dem Fix mit dem Lighthouse-Audit "Ensure text remains visible during webfont load".