Font Loading
Definition: Font Loading beschreibt den Prozess und die Strategien, mit denen Web-Schriftarten (Webfonts) effizient in den Browser geladen werden. Da Schriftarten externe Ressourcen sind, können sie die Textdarstellung blockieren, sichtbares Flackern verursachen und Cumulative Layout Shift (CLS) produzieren – alles Faktoren die Core Web Vitals und Conversion Rates negativ beeinflussen. Optimiertes Font Loading nutzt die CSS-Eigenschaft font-display, Preloading via <link rel="preload">, das WOFF2-Format, Font-Subsetting und gegebenenfalls Self-Hosting statt externer Dienste wie Google Fonts. Variable Fonts reduzieren HTTP-Requests für Schriftfamilien mit mehreren Schnitten.
Erläuterung
Webfonts sind häufig render-blockierende Ressourcen: Der Browser rendert keinen Text, bis die Schriftdatei geladen ist. Bei langsamem Netz oder schlechter Font-Optimierung entsteht FOIT (Text unsichtbar für bis zu 3 Sekunden) oder FOUT (Text springt von Systemschrift zur Webschrift mit messbarem Layout Shift). Beides schadet der wahrgenommenen Performance und ist in Lighthouse und Core Web Vitals direkt messbar.
font-display-Strategien
- font-display: swap: Systemschrift sofort zeigen, Webfont einwechseln wenn geladen; FOUT möglich aber kein unsichtbarer Text; empfohlen von Google für LCP-relevante Texte; CLS-Risiko wenn Schriftmetriken stark abweichen; Gegenmaßnahme: size-adjust, ascent-override, descent-override CSS-Eigenschaften
- font-display: optional: Browser entscheidet basierend auf Netzwerkgeschwindigkeit ob Webfont geladen wird; kein FOUT, kein CLS; Webfont nur bei sehr schnellem Netz verwendet; empfohlen für nicht-kritische Dekoration-Schriften; Google-Empfehlung für beste CLS-Performance
- font-display: fallback: Kurze Blockierperiode (100ms), dann Fallback; wenn Webfont innerhalb ~3s lädt: Tausch; sonst: Fallback für diese Seitenladung; Kompromiss zwischen swap und optional
- font-display: block: Browser wartet bis zu 3 Sekunden auf Webfont (unsichtbarer Text); FOIT-Verhalten; nur sinnvoll wenn Systemschrift-Fallback visuell völlig inakzeptabel ist (z. B. Icon-Fonts); nicht empfohlen für reguläre Textschriften
Preloading und Ressourcen-Hinweise
- <link rel="preload">: Teilt Browser im <head> früh mit welche Font-Dateien kritisch sind; <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>; nur für Above-the-fold-Schriften preloaden (max. 2 Dateien); zu viele Preloads kontraproduktiv – verdrängen andere kritische Ressourcen
- Preconnect für Google Fonts: <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>; reduziert DNS-Lookup und TCP-Verbindungsaufbau; Verbesserung ~200–400ms auf first load; keine Hilfe bei Requests selbst
- Self-Hosting vs. Google Fonts: Self-Hosting: kein externer DNS-Lookup, kein Cross-Origin-Overhead, kein Privacy-Problem (DSGVO); HTTP/2 Push möglich; Google Fonts: einfacher, automatisch aktuell, kein eigenes CDN nötig; Benchmark: Self-Hosting typisch 100–300ms schneller auf erster Ladung; google-webfonts-helper.herokuapp.com für Download-Tool
Font-Formate und Dateigrößen
- WOFF2: Standard-Format 2024; beste Komprimierung (Brotli-basiert); 30–50 % kleiner als WOFF; alle modernen Browser unterstützt; nur noch WOFF2 anbieten reicht für >98 % der Browser; TTF/OTF für Web nicht mehr nötig
- Font-Subsetting: Nur benötigte Zeichen in Font-Datei einschließen; unicode-range in @font-face deklariert welche Zeichen diese Datei abdeckt; lateinische Basis-Zeichen: 20–30 KB statt 200+ KB für vollständige Schrift; Tools: pyftsubset, glyphhanger, Fonttools; Google Fonts macht dies automatisch per &text=-Parameter
- Variable Fonts: Eine Datei enthält gesamte Schriftfamilie (Regular, Bold, Italic, alle Gewichte); statt 4–8 @font-face-Anfragen nur 1–2; Größe: 50–100 KB vs. 4 × 30 KB = 120 KB; font-weight: 100 900 im @font-face deklarieren; Unterstützung: alle modernen Browser; Caveat: ältere Safari-Versionen begrenzt
CLS durch Schriftladen vermeiden
- Fallback-Font-Metriken anpassen: Systemschrift-Fallback mit gleichen Metriken wie Webfont: ascent-override, descent-override, line-gap-override, size-adjust; reduziert Layout-Shift beim Font-Tausch auf nahe null; fontpie oder Font Style Matcher Tools berechnen die passenden Werte automatisch
- Critical Font Inline: Zeichensatz für Above-the-fold-Bereich (z. B. nur Headline-Zeichen) als Base64 direkt im HTML inlinen; kein HTTP-Request; nur für sehr kleine Subsets sinnvoll (<2 KB); kombiniert mit font-display: optional für den vollständigen Font
- Lighthouse-Font-Audit: «Ensure text remains visible during webfont load» = font-display-Problem; «Avoid large layout shifts» = CLS durch Font-Tausch; «Reduce unused CSS» umfasst auch ungenutzte @font-face-Deklarationen; PageSpeed Insights zeigt Font-spezifische Empfehlungen
Praxistipp: Wechseln Sie zu Self-Hosted WOFF2-Fonts (kostenlos mit google-webfonts-helper) und fügen Sie im <head> einen Preload für maximal die zwei wichtigsten Schriftschnitte ein (z. B. Regular und Bold der Headline-Schrift). Setzen Sie font-display: optional – das eliminiert CLS und FOIT vollständig, weil der Browser bei langsamer Verbindung einfach die Systemschrift behält. Messen Sie vorher und nachher mit PageSpeed Insights: typische Verbesserung ist 0.1–0.3 Punkte im Performance-Score und messbarer CLS-Rückgang. Für Projekte mit 3+ Schriftschnitten lohnt sich der Wechsel zu Variable Fonts – eine Anfrage statt fünf ist signifikant.