Web-Font-Optimierung (Variable Fonts, Subsetting, font-display)
Web-Font-Optimierung umfasst alle Maßnahmen, um eingebundene Schriftarten schnell, ohne Layout-Sprünge und mit minimaler Dateigröße auszuliefern. Dazu zählen Subsetting (Reduktion auf tatsächlich benötigte Zeichen), Variable Fonts (eine Datei für mehrere Schnitte statt einzelner Dateien pro Gewicht) sowie die CSS-Eigenschaft font-display, die das Rendering-Verhalten während des Ladens steuert. Unoptimierte Web-Fonts können den Largest Contentful Paint verzögern, wenn das LCP-Element ein Textblock ist, und verursachen Layout-Sprünge (CLS), wenn Fallback- und Zielschrift unterschiedlich viel Platz beanspruchen.
In der Praxis
Für Websites mit lateinischen Zeichensätzen reicht in der Regel ein Subset, das Umlaute und Sonderzeichen enthält – Tools wie glyphhanger oder die Google-Fonts-Subsetting-API reduzieren Dateigrößen spürbar, am stärksten bei Schriften mit sehr großem Zeichenvorrat (etwa CJK mit über 10.000 Glyphen); bei ohnehin lateinischen Schnitten mit typischerweise 100 bis 1.000 Glyphen fällt der Gewinn deutlich kleiner aus. Das Format WOFF2 sollte Standard sein, da es rund 30 Prozent kleiner als WOFF ist und von allen relevanten Browsern unterstützt wird. font-display: optional oder swap sind für die meisten Websites die sinnvollste Wahl, wobei optional Layout-Sprünge am zuverlässigsten vermeidet, während swap Text sofort mit Fallback-Schrift anzeigt. Kritische Fonts sollten per im Head priorisiert und über passende Fallback-Font-Metriken an die Zielschrift angeglichen werden, um CLS zu minimieren. Variable Fonts lohnen sich vor allem, wenn eine Website mehrere Schnitte (Regular, Medium, Bold, Italic) derselben Schriftfamilie nutzt – bei nur ein bis zwei Schnitten sind klassische statische Fonts oft schlanker. Selbst gehostete Fonts statt Einbindung von Google-Fonts-Servern verkürzen zudem DNS- und Verbindungszeit; außerdem wird dabei keine IP-Adresse der Besucherinnen und Besucher an einen Drittanbieter übertragen.