Webschriften
Eine Webschrift ist eine Schriftdatei, die eine Website mit ihren Seiten ausliefert, damit Text in der vorgesehenen Schrift erscheint, auch wenn das Gerät sie nicht kennt.
Was es ist
Ein Stylesheet meldet eine Webschrift mit der Regel @font-face an, und der Browser lädt die Datei, sobald Text auf der Seite sie braucht. Das passende Format dafür ist WOFF2Das Schriftformat des W3C für das Web. Es packt die Schriftdaten mit Brotli, darum ist eine WOFF2-Datei deutlich kleiner als dieselbe Schrift als TTF oder OTF.Im Glossar, eine Empfehlung des W3C, die Schriftdaten mit Brotli packt. Laut web.dev verdichtet es bis zu 30 Prozent besser als der Vorgänger WOFF. Eine klassische Schriftfamilie braucht für jeden Schnitt eine eigene Datei. Eine Variable SchriftEine Schriftdatei, die einen stufenlosen Bereich von Schnitten enthält, etwa jede Strichstärke von dünn bis extrafett, statt einer Datei pro Schnitt. Eine Seite mit mehreren Strichstärken lädt dann eine einzige Datei.Im Glossar enthält einen stufenlosen Bereich von Strichstärken, oft auch Breiten, in einer einzigen Datei. Eine TeilmengeEine Schriftdatei, die nur die Zeichen enthält, die eine Website tatsächlich verwendet, etwa nur lateinische Buchstaben. Ohne ungenutzte Schriftsysteme und Symbole wird die Datei spürbar kleiner.Im Glossar lässt Zeichen weg, die eine Website nie verwendet, etwa kyrillische oder griechische Buchstaben auf einer Seite in Deutsch und Englisch.
Warum es zählt
Die mittlere mobile Startseite lud 2025 Schriften mit 122 KB (Web Almanac), mehr als das Fünffache ihres HTML. Eine Schrift entscheidet zudem, wann Text lesbar wird. Bis die Datei da ist, versteckt der Browser den Text oder zeigt ihn in einer Ersatzschrift und tauscht sie später aus. Mit der Einstellung font-display: block verbergen Chromium und Firefox Text bis zu drei Sekunden lang. Mit swap erscheint der Text sofort in der Ersatzschrift. Der Wechsel kann dann aber das Layout verschieben, sobald die Webschrift eintrifft, und das verschlechtert den Messwert CLSCumulative Layout Shift: wie stark sichtbare Inhalte unerwartet verrutschen, während eine Seite lädt und benutzt wird. Google bewertet einen Wert von 0.1 oder weniger als gut.Im Glossar.
Die Praxis hinkt teilweise hinterher. 2025 entfielen rund 65 Prozent der Anfragen nach Schriftdateien auf WOFF2, 41 Prozent der mobilen Websites nutzten mindestens eine variable Schrift, und rund die Hälfte aller Seiten setzte font-display: swap ein.
Worauf es ankommt
Der erste Hebel sind weniger Dateien, denn eine einzige variable Schrift kann mehrere statische ersetzen. Teilmengen und WOFF2 verkleinern danach jede verbleibende Datei. Ein PreloadEine Anweisung im HTML (`<link rel="preload">`), die den Browser eine Datei früh laden lässt, weil die Seite sie gleich braucht, typischerweise eine Schrift oder das Hauptbild.Im Glossar lässt den Browser die Schrift früh anfordern, statt zu warten, bis er das Stylesheet gelesen hat. Er verlangt das Attribut crossorigin, auch wenn die Schrift auf dem eigenen Server liegt, und 2025 luden nur rund 12 Prozent der Seiten mindestens eine Schrift auf diese Weise vor. Zu viele vorgeladene Dateien nehmen wichtigerem Inhalt Bandbreite weg. Preload passt deshalb nur für die Schriften, die der erste Bildschirm braucht.
Auch die Ersatzschrift verdient Aufmerksamkeit: Je näher ihre Proportionen an der Webschrift liegen, desto weniger bewegt sich der Text beim Wechsel. Und schliesslich braucht eine Schrift eine Lizenz für den Einsatz im Web, die eine Desktop-Lizenz nicht immer einschliesst.