Moderne Font-Loading-Strategien für Web-Performance

Web-Fonts können die Performance Ihrer Website entscheidend beeinflussen. Eine schlecht implementierte Font-Strategie führt zu unsichtbarem Text, Layout-Verschiebungen und frustrierten Nutzern. Dennoch laden die meisten Entwickler Fonts immer noch wie im Jahr 2015 – sie versenden massive Dateien, ignorieren moderne CSS-Features und hoffen auf das Beste.

Dieser Artikel behandelt praktische Font-Loading-Strategien, die Sie heute implementieren können: WOFF2-Komprimierung nutzen, Rendering mit font-display steuern, Fonts intelligent unterteilen, System-Font-Stacks als Fallbacks verwenden, kritische Fonts vorladen und Variable Fonts dort einsetzen, wo sie sinnvoll sind. Sie lernen, wie Sie Performance mit Typografie in Einklang bringen und dabei Core Web Vitals verbessern.

WOFF2 wählen und Legacy-Formate eliminieren

Hören Sie auf, mehrere Font-Formate auszuliefern. WOFF2 bietet 30% bessere Komprimierung als WOFF und hat universelle Browser-Unterstützung. Außer Sie unterstützen IE11, ist WOFF2 alles, was Sie brauchen.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

TTF, OTF oder WOFF neben WOFF2 auszuliefern verschwendet Bandbreite. Jeder Besucher zahlt eine Performance-Steuer für Browser, die kaum noch existieren. Konvertieren Sie bestehende Fonts mit FontSquirrel oder CloudConvert.

Rendering mit font-display steuern

Der font-display-Deskriptor bestimmt, wie Browser mit der Lücke zwischen Font-Anfrage und Rendering umgehen:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Fallback sofort anzeigen */
}

Ihre Optionen:

• swap: Zeigt Fallback-Text sofort, wechselt wenn bereit (verhindert FOIT)
• fallback: Kurze unsichtbare Phase (~100ms), dann Fallback
• optional: Verwendet Font nur, wenn sofort verfügbar
• block: Versteckt Text bis zu 3 Sekunden (vermeiden Sie dies)

Für Fließtext verwenden Sie swap. Für dekorative Fonts erwägen Sie optional. Diese eine Zeile kann das Problem des unsichtbaren Texts eliminieren.

Intelligentes Font-Subsetting implementieren

Die meisten Websites versenden komplette Zeichensätze, die sie niemals verwenden werden. Ein vollständiger Latin Extended Font kann 100KB überschreiten, während Ihre englische Website möglicherweise nur 30KB an Glyphen benötigt.

Verwenden Sie unicode-range, um Fonts nach Schrift aufzuteilen:

/* Latin */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Latin Extended */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF;
}

Tools wie Glyphhanger analysieren Ihren Content und generieren optimale Subsets. Für Google Fonts bietet google-webfonts-helper bereits unterteilte Dateien.

Robuste System-Font-Stacks entwickeln

System-Fonts laden sofort und bieten exzellente Fallbacks. Ein gut durchdachter Stack gewährleistet lesbaren Text, selbst wenn Custom Fonts fehlschlagen:

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

Gleichen Sie Metriken zwischen Custom- und Fallback-Fonts mit CSS-Deskriptoren ab:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100.5%; /* Fallback-Metriken anpassen */
  ascent-override: 95%;
  descent-override: 25%;
}

Verwenden Sie Font Style Matcher, um diese Werte zu berechnen und Layout-Verschiebungen zu minimieren.

Kritische Fonts vorladen

Preloading weist Browser an, Fonts sofort zu laden, bevor sie in CSS entdeckt werden:

<link rel="preload" href="/fonts/inter-latin.woff2" 
      as="font" type="font/woff2" crossorigin>

Wichtige Überlegungen:

• Laden Sie nur Above-the-fold-Fonts vor
• Fügen Sie das crossorigin-Attribut hinzu (für Fonts erforderlich)
• Verwenden Sie die exakte URL aus Ihrer @font-face-Deklaration
• Vermeiden Sie das Vorladen jedes Subsets – das konterkariert den Zweck des Subsettings

Kombinieren Sie mit eingebettetem kritischem CSS für maximale Wirkung:

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-display: swap;
  }
</style>

Variable Fonts strategisch einsetzen

Variable Fonts können mehrere Dateien durch eine ersetzen, sind aber nicht immer kleiner. Ein Variable Font mit Gewichtungen 100-900 könnte 50KB groß sein, während zwei statische Gewichtungen zusammen 30KB betragen.

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Beliebige Gewichtung im Bereich verwenden */
h1 { font-weight: 750; }
p  { font-weight: 425; }

Variable Fonts glänzen, wenn Sie benötigen:

• Mehrere Gewichtungen oder Breiten
• Sanfte Animationen zwischen Gewichtungen
• Responsive Typografie, die mit dem Viewport skaliert

Für einfache Websites mit 2-3 Gewichtungen sind statische Fonts oft performanter.

Auswirkungen auf Core Web Vitals

Ordnungsgemäßes Font-Loading verbessert direkt wichtige Metriken:

Largest Contentful Paint (LCP): Preloading und font-display: swap stellen sicher, dass Text schnell rendert und Verzögerungen bei der LCP-Messung verhindert werden.

Cumulative Layout Shift (CLS): Das Anpassen von Font-Metriken und die Verwendung von size-adjust eliminiert störende Text-Umbrüche beim Laden von Fonts.

First Input Delay (FID): Die Reduzierung der Font-Payload und das Vermeiden von render-blockierendem Verhalten hält den Main Thread responsiv.

Fazit

Modernes Font-Loading geht nicht darum, eine perfekte Strategie zu wählen – es geht darum, Techniken zu kombinieren, die für Ihre spezifischen Bedürfnisse funktionieren. Beginnen Sie mit WOFF2 und font-display: swap. Fügen Sie Subsetting und Preloading für kritische Fonts hinzu. Verwenden Sie System-Font-Stacks als solide Fallbacks. Erwägen Sie Variable Fonts nur dann, wenn sie klare Vorteile bieten.

Am wichtigsten ist: Messen Sie die Auswirkungen. Verwenden Sie WebPageTest oder Lighthouse, um zu überprüfen, ob Ihre Font-Strategie tatsächlich Performance-Metriken verbessert. Schöne Typografie sollte nicht auf Kosten der Benutzererfahrung gehen.

Häufig gestellte Fragen

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.