Webfont-Ladeverhalten: font-display, Preload, unicode-range-Subsetting und metrikangepasste Fallbacks

Ziel

Text ist beim ersten Rendern sichtbar, die Marken-Schrift kommt ohne Zeilenverschiebung an, und eine Seite in einem Schriftsystem lädt nur die Glyphen, die sie tatsächlich benutzt.

Voraussetzungen

WOFF2-Schriftdateien mit einer Lizenz, die Subsetting erlaubt, ein Subsetting-Werkzeug (zum Beispiel pyftsubset aus fontTools), und Kontrolle über die Antwort-Header auf dem Host, der die Schriften ausliefert.

Schritte

1. Jeden Schriftschnitt in Subsets pro Schriftsystem aufteilen (Latein, Latein Erweitert, Kyrillisch, Griechisch, …) und jedes mit eigener @font-face-Regel und unicode-range deklarieren. MDN hält fest: Nutzt die Seite kein Zeichen aus einem Bereich, wird die Schrift nicht heruntergeladen; nutzt sie mindestens eines, wird die ganze Datei heruntergeladen.
2. font-display je nach Rolle anhand der MDN-Definitionen wählen: swap liefert eine extrem kurze Blockierungsphase und eine unbegrenzte Swap-Phase (der Fallback erscheint sofort und wird gewechselt, sobald die Schrift eintrifft); fallback liefert eine kurze Swap-Phase; optional liefert gar keine Swap-Phase. optional für Fliesstext verwenden, wo ein später Wechsel mehr kostet als eine fehlende Schrift, und swap für Überschriften und Logos.
3. Nur die für das erste Rendern nötigen Dateien preloaden: <link rel="preload" as="font" type="font/woff2" href="…" crossorigin>. MDN weist darauf hin, dass das Preloaden von Schriften das Attribut crossorigin selbst bei Dateien vom gleichen Ursprung erfordert, weil Schriften im CORS-Modus abgerufen werden.
4. Einen metrikangepassten Fallback-Schriftschnitt deklarieren: eine zweite @font-face-Regel mit src: local("Arial") (oder einem anderen auf der Plattform vorhandenen Schriftschnitt) sowie size-adjust, ascent-override, descent-override und line-gap-override, so lange abgestimmt, bis ein Absatz in beiden Schriftschnitten in denselben Zeilen umbricht. In font-family nach der Webschrift aufführen.
5. Schriftdateien mit einem langen Cache-Control: max-age plus immutable ausliefern, und mit CORS-Headern, falls sie auf einem anderen Ursprung liegen.
6. Mit einem gedrosselten Netzwerkprofil prüfen: kein unsichtbarer Text, kein Zeilensprung beim Wechsel, und wenige Font-Anfragen pro Seite. Scheitert eines davon, Subsets enger fassen oder mehr Text auf optional umstellen.

Erwartetes Ergebnis

Beim ersten Rendern erscheint Text im Fallback oder in der gecachten Webschrift, der Wechsel (falls vorhanden) verschiebt Zeilen kaum, und eine rein lateinische Seite lädt ein oder zwei kleine Dateien statt der ganzen Schriftfamilie.

Grenzen und Prüfbasis

Das Verhalten der Block- und Swap-Phasen folgt den zitierten MDN-Definitionen; die genauen Zeitdauern sind browserspezifisch und werden hier nicht behauptet. System-Font-Stacks (font-family: system-ui) vermeiden das Laden vollständig, und variable Schriften ersetzen mehrere statische Dateien durch eine einzige; beides wird hier nicht verglichen. Es werden keine Messwerte berichtet.