Webfonts sind eine der häufigsten Ursachen für schlechte Core Web Vitals. Falsch geladene Fonts verursachen FOIT (Flash of Invisible Text) oder FOUT (Flash of Unstyled Text) – beides schadet der User Experience und dem CLS-Score. Mit den richtigen Techniken laden Fonts schnell und ohne sichtbare Sprünge.
Was FOIT und FOUT bedeuten
FOIT (Flash of Invisible Text): Der Browser wartet auf den Webfont und zeigt in der Zwischenzeit keinen Text an. Die Seite lädt, aber Nutzer sehen weißen oder leeren Bereich wo Text sein sollte – typischerweise 1–3 Sekunden.
FOUT (Flash of Unstyled Text): Der Browser zeigt zuerst den Fallback-Font (System-Schrift), wechselt dann zum geladenen Webfont. Das verursacht einen sichtbaren Textsprung mit CLS-Auswirkung.
Welches ist schlimmer? Beide sind schlecht, FOIT ist tendenziell schlimmer für die User Experience, FOUT ist schlimmer für CLS-Score.
Google’s CrUX-Daten zeigen: Websites mit nicht-optimiertem Font-Loading haben im Durchschnitt einen CLS-Score von 0.15+ – deutlich über dem „Gut”-Grenzwert von 0.1. Font-Optimierung ist oft der effizienteste CLS-Fix.
font-display: Die CSS-Grundlösung
Das font-display-Attribut steuert das Ladeverhalten von Webfonts:
@font-face {
font-family: 'Meine Font';
src: url('/fonts/meine-font.woff2') format('woff2');
font-display: swap;
}Die wichtigsten Werte:
swap: Fallback-Font sofort anzeigen, dann auf Webfont wechseln. Kein FOIT, aber FOUT möglich. Bester Kompromiss für die meisten Websites.
optional: Font wird nur verwendet wenn er in sehr kurzer Zeit (< 100ms) verfügbar ist. Kein FOIT, kein FOUT, aber Font könnte nicht angezeigt werden beim ersten Besuch.
fallback: 100ms Block-Period, dann Fallback. Kurzes FOIT möglich, aber minimal.
block: Langer Block (bis 3 Sekunden), dann Fallback. Maximales FOIT – vermeiden.
Preloading: Den Font früher laden
font-display: swap verhindert FOIT, behebt aber nicht den FOUT wenn der Font spät lädt. Preloading lädt den Font früher:
<head>
<!-- Font im <head> preloaden -->
<link rel="preload" href="/fonts/meine-font.woff2"
as="font" type="font/woff2" crossorigin>
<!-- Dann im Stylesheet definieren -->
<link rel="stylesheet" href="/css/fonts.css">
</head>Mit Preloading kombiniert mit font-display: optional erreichen Sie das Ideal: Font lädt früh genug um ohne FOUT direkt verfügbar zu sein.
Preloaden Sie nur die wichtigsten Font-Varianten: Regular und Bold der Hauptschrift für Above-the-fold-Content. Preloading von 5+ Font-Dateien schadet der Performance mehr als es hilft – der Browser konkurriert dann mit anderen wichtigen Ressourcen um Bandbreite.
Lokale Fonts vs. Google Fonts
Google Fonts sind bequem, aber performance-kritisch:
Problem mit Google Fonts:
- Zusätzlicher DNS-Lookup zu fonts.googleapis.com
- Redirect zu fonts.gstatic.com
- Font-Datei von externem Server laden
- DSGVO-Risiko (IP-Adresse an Google übermittelt)
Lösung: Fonts lokal hosten
- Fonts von Google Fonts Helper herunterladen
- In
/public/fonts/oder/fonts/speichern @font-facemit lokalem Pfad definieren
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Lokale Fonts eliminieren externe Requests komplett und sind DSGVO-konform.
Variable Fonts: Eine Datei für alle Gewichte
Variable Fonts sind eine neuere Technologie die alle Gewichte in einer Datei vereint:
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* Alle Gewichte 100–900 */
font-display: swap;
}
/* Nutzung: */
h1 { font-weight: 800; } /* Aus derselben Datei */
p { font-weight: 400; } /* Aus derselben Datei */Vorteil: Statt 3–4 Font-Dateien (Regular, Bold, Italic, Bold-Italic) nur eine Datei. Weniger HTTP-Requests, oft kleinere Gesamtgröße.
Subsetting: Nur benötigte Zeichen laden
Für deutsche Websites: Fonts oft mit kyrillischen, arabischen oder anderen Zeichensätzen ausgeliefert die Sie nie brauchen.
unicode-range einschränken:
@font-face {
font-family: 'Meine Font';
src: url('/fonts/font-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153,
U+00C4, U+00D6, U+00DC, U+00E4, U+00F6, U+00FC, U+00DF;
/* Lateinisch + Deutsche Umlaute */
}Google Fonts Subset für Deutsch reduziert die Font-Größe typischerweise um 40–60 %.
Die Kombination aus lokalen Fonts, font-display: swap, Preloading der Hauptschrift und Unicode-Range-Subsetting reduziert font-bezogene LCP- und CLS-Probleme in den meisten Fällen um 70–80 % – messbar in PageSpeed Insights vor/nach dem Vergleich.
Mehr zu Core Web Vitals finden Sie in unserem Artikel über WordPress Core Web Vitals optimieren.