Zusammenfassung: Web-Fonts blockieren standardmäßig das Rendering, was zu Flash of Invisible Text (FOIT) führt. Diese Anleitung behandelt
font-display, Font-Subsetting,preload-Hints und Self-Hosting, um Layout-Verschiebungen zu eliminieren und ein schnelles First Paint zu erreichen. Lernen Sie Produktionsmuster auf tanstackship.com kennen.
Einführung
Web-Fonts beeinflussen sowohl das visuelle Design als auch die Performance. Ein langsames Laden der Schriftart kann den First Contentful Paint um mehrere Sekunden verzögern. Im Jahr 2026, mit variablen Schriftarten und umfangreichen Typografie-Optionen, ist die Optimierung des Ladens von Schriftarten für die Core Web Vitals-Werte unerlässlich.
Vergleich von Font-Loading-Strategien
| Strategie | FOIT-Dauer | FOUT-Risiko | Komplexität | Am besten für |
|---|---|---|---|---|
font-display: swap | 0ms | Hoch | Niedrig | Fließtext |
font-display: optional | 100ms | Mittel | Niedrig | UI-Icons |
font-display: block | 3s | Keine | Niedrig | Marken-Überschriften |
| Preload + swap | 0ms | Mittel | Mittel | Hero-Text-Fonts |
| Critical Font Inlining | 0ms | Niedrig | Hoch | Above-the-fold-Text |
| Self-Hosting (WOFF2) | Variiert | Niedrig | Mittel | Gesamten produktiven Einsatz |
Implementierung von font-display
/* Optimales font-display für Fließtext */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2');
font-display: swap;
font-weight: 100 900;
unicode-range: U+0000-00FF;
}
Der Wert swap gibt der Schriftart eine Blockierungsperiode von 100ms und wechselt dann zu einem Fallback, wenn die Schriftart nicht geladen wurde. Dies eliminiert unsichtbaren Text und vermeidet gleichzeitig Layout-Verschiebungen.
Preloading von kritischen Schriftarten
<!-- Preload Ihrer primären Schriftart -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload nur für das Gewicht, das Sie für Above-the-fold-Inhalte benötigen -->
<link rel="preload" href="/fonts/inter-semibold.woff2" as="font" type="font/woff2" crossorigin>
Das Preloading verschiebt die Schriftarten-Erkennung in die anfängliche HTML-Parsing-Phase, bevor der Browser auf die CSS @font-face-Deklaration stößt.
Font-Subsetting zur Größenreduzierung
| Technik | Größenreduzierung | Implementierung |
|---|---|---|
| Basic Latin Subset | 60-70% | pyftsubset oder glyphhanger |
| Variable Font Subset | 50-60% | Kombiniertes Achsen- + Zeichen-Subset |
| Unicode-Range Splitting | 40-50% | CSS unicode-range pro @font-face |
| WOFF2-Kompression | 30-50% | Automatisch mit modernen Tools |
# Reduziert eine Schriftart mit glyphhanger auf Basic Latin
npx glyphhanger https://your-site.com --subset=*.ttf --formats=woff2
# Ergebnis: Schriftartendatei wurde von 150KB auf 45KB reduziert
Self-Hosting vs. Google Fonts
// Self-hosted Font-Loading in TanStack Start
import { defineFont } from '~/lib/fonts'
export const primaryFont = defineFont({
src: '/fonts/inter-var.woff2',
display: 'swap',
preload: true,
fallback: {
fontFamily: 'system-ui',
sizeAdjust: '105%' // Passen Sie Metriken an, um Layout-Verschiebungen zu reduzieren
}
})
Self-Hosting eliminiert den DNS-Lookup, die TCP-Verbindung und die TLS-Aushandlung zu den Servern von Google, was beim ersten Laden 200-400ms spart.
Fazit
Die Optimierung des Ladens von Schriftarten wirkt sich direkt auf den Largest Contentful Paint und den Cumulative Layout Shift aus. Priorisieren Sie das Self-Hosting von WOFF2-Schriftarten, verwenden Sie font-display: swap für Fließtext, preloaden Sie kritische Schriftarten und wenden Sie aggressives Subsetting an. Diese Techniken stellen sicher, dass Ihre Typografie die Benutzererfahrung verbessert anstatt sie zu behindern.
Für das Gesamtbild lesen Sie unseren Preload, Prefetch, and Preconnect Guide für Best Practices zu Ressourcen-Hints, und Critical CSS and Inlining Strategies für die Optimierung der CSS-Auslieferung. Kombinieren Sie dies mit dem Core Web Vitals Optimization Guide und dem CDN Selection and Configuration Guide für eine vollständige Performance-Strategie.