Webfonts reduzieren, lokal und stabil laden

Cookbook: Ziel und Ergebnis

Die Seite verwendet wenige tatsächlich benötigte Schnitte, bevorzugt WOFF2 und stabile Fallback-Metriken. Lokales Hosting vermeidet zusätzliche DNS/TLS-Verbindungen und vereinfacht Datenschutz.

Rezept: Schritt für Schritt

1. Alle geladenen Familien, Gewichte, Stile, Zeichensätze und tatsächliche Nutzung inventarisieren.
2. Unbenutzte Schnitte entfernen; variable Font nur wählen, wenn sie insgesamt kleiner als benötigte Einzeldateien ist.
3. WOFF2 lokal ausliefern, lange versionierte Cache-Header setzen und nur den kritisch benötigten Schnitt preloaden.
4. font-display und metrisch passende System-Fallbacks testen; keine unsichtbare Schrift über lange Zeit.

Rechenweg oder Entscheidungsregel

Fontbudget = Summe aller beim Erstaufruf benötigten WOFF2-Dateien\nErsparnis = entfernte Schnitte + entfernte Subsets + vermiedene Fremdverbindung

Praxisbeispiel

Vorher: Familie mit 6 Schnitten à 70 kB = 420 kB. Tatsächlich gebraucht: Regular und Bold; als Subset je 42 kB = 84 kB. Gewinn 336 kB plus weniger Requests. Nur Regular preloaden, wenn Überschrift nicht Bold-LCP ist.

Prüfen, ob es funktioniert

• Keine Anfrage an ungewollte externe Font-Domains.
• Text bleibt sofort sichtbar; kein auffälliger Layoutsprung beim Fontwechsel.
• WOFF2 wird lange gecacht und nur benötigte Schnitte geladen.

Rollback

Neue @font-face-Regeln deaktivieren, vorherige Theme-/Plugin-Fontausgabe wiederherstellen und Assetcache purgen. Lokale Fontdateien erst nach Rückkehr zur alten Konfiguration entfernen.

Kosten einer Schrift

Jede Font-Datei ist ein zusätzlicher Download und kann Textdarstellung oder Layout beeinflussen. Viele Familien, Gewichte und Zeichensätze vervielfachen die Last. Externe Origins benötigen zudem Verbindungen und können Datenschutzfragen aufwerfen.

Empfehlung

1. Prüfe, ob ein guter Systemfont genügt.
2. Wenn nicht: nur verwendete Familien/Schnitte, möglichst WOFF2 und passende Zeichensätze ausliefern.
3. Fonts lokal hosten, sofern Lizenz und Organisation das erlauben.
4. font-display und metrisch passende Fallbacks testen.
5. Nur den wirklich kritischen Font preloaden; zu viele Preloads konkurrieren mit LCP.

Erfolgskontrolle

Miss LCP, CLS und übertragene Font-Bytes. Prüfe Fettdruck, Sonderzeichen und Redaktionsinhalte. Ein schneller Fallback kann CLS erzeugen, wenn seine Metriken stark abweichen.

Quellen und Prüfstand

• Google: CSS und Web Vitals
• Google: kritische Assets preloaden

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.