Was ist Font Preload?
Die schnelle Definition
Font Preload ist ein Ressourcenhinweis im HTML-Kopf, der den Browser anweist, eine voraussichtlich früh benötigte Schriftdatei mit hoher Priorität zu laden. Typisch ist <link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>. Der Hinweis lädt die Datei, wendet sie aber nicht selbst an; dafür bleibt die passende CSS- und @font-face-Definition erforderlich.
Warum ist Font Preload wichtig?
Font Preload soll die Wartezeit auf eine zentrale Webfont verringern und späten Texttausch vermeiden. Er eignet sich nicht zum vorsorglichen Laden aller Schriftschnitte. Die Wirkung hängt von Cache, Verbindung, Renderingstrategie und dem tatsächlichen Einsatz oberhalb des sichtbaren Bereichs ab und muss gemessen werden.
So wird Font Preload in der Praxis eingesetzt
- Bedarf begrenzen: nur Schriftdateien vorladen, die auf der aktuellen Seite sofort für sichtbaren Text verwendet werden; weitere Schnitte normal entdecken lassen.
- Attribute abstimmen: URL, Format,
as="font", MIME-Typ und CORS-Modus müssen zur späteren Font-Anfrage passen, sonst droht ein doppelter Download. - Font-Dateien optimieren: moderne Formate, benötigte Zeichenbereiche, lange Cache-Laufzeiten und eine passende
font-display-Strategie einsetzen. - Vorher und nachher messen: Netzwerk-Wasserfall, ungenutzte Preloads, LCP, CLS und sichtbares Textverhalten unter mobilen Bedingungen vergleichen.
Praxisbeispiel
Die Startseite nutzt im sichtbaren H1 ausschließlich den regulären WOFF2-Schnitt einer Hausschrift. Genau diese Datei wird mit korrektem CORS-Attribut vorgeladen. Kursive und fette Varianten bleiben ohne Preload, weil sie erst weiter unten erscheinen. Der Netzwerkvergleich bestätigt, dass der vorgeladene Font einmal geladen und tatsächlich verwendet wird.
Häufige Fehler
- Alle Gewichte und Zeichensätze werden vorgeladen und verdrängen dadurch wichtigere Ressourcen aus dem frühen Netzwerkfenster.
- Preload und CSS-Font-Anfrage verwenden unterschiedliche URLs oder CORS-Modi; der Browser kann den Download nicht wiederverwenden.
- Ein Lighthouse-Hinweis wird ohne Wasserfall- und Seitentest umgesetzt, obwohl die Schrift nicht oberhalb des sichtbaren Bereichs benötigt wird.
Bedeutung für Google, Bing und KI-Suchsysteme
Font Preload ist kein eigenständiger Rankingfaktor. Richtig eingesetzt kann er das Rendern wichtiger Texte beschleunigen; falsch eingesetzt kann er andere kritische Ressourcen verzögern. Für Suchmaschinen bleiben indexierbarer Text und belastbar gemessene Seitenerfahrung wichtiger als die bloße Existenz des Hinweises.
Verwandte Begriffe
Zusammenfassung: Font Preload priorisiert eine früh benötigte Schriftdatei, ersetzt aber weder CSS noch @font-face. Nur tatsächlich kritische Fonts sollten mit passenden URL-, Typ- und CORS-Angaben vorgeladen werden. Netzwerk- und Layoutmessungen entscheiden, ob der Hinweis nützt.
