Web-Schriften optimieren: font-display, Subsetting und Self-Hosting

Web-Schriften sehen gut aus, sind aber eine versteckte Ursache für langsame, springende Seiten. Eine typische Schrift wiegt 30–100 KB und blockiert die Textanzeige, bis sie geladen ist — und trifft sie ein, verschiebt sie oft das ganze Layout, weil sie sich von der Ersatzschrift unterscheidet. Das Ergebnis sind zwei schlechte Kennzahlen: LCP (Text verspätet sich) und CLS (Inhalt springt). Die gute Nachricht: All das lässt sich mit wenigen Schritten beheben.

WOFF2 nutzen, nichts Älteres

WOFF2 ist das am stärksten komprimierte Format und wird von jedem modernen Browser unterstützt. Gegenüber altem TTF oder OTF ist WOFF2 bei gleicher Schrift 25–40% kleiner. Liefert Ihr Theme noch mehrere Formate „zur Kompatibilität", können Sie bedenkenlos nur WOFF2 behalten — Browser ohne Unterstützung sind aus echtem Traffic praktisch verschwunden.

font-display: FOIT und FOUT lösen

Ohne Einstellung verbirgt der Browser den Text, während die Schrift lädt (FOIT — Flash of Invisible Text). Das bedeutet leeren Raum statt Inhalt für bis zu 3 Sekunden. Die Eigenschaft font-display in der @font-face-Regel ändert dieses Verhalten:

• swap — sofort die Ersatzschrift zeigen und beim Eintreffen der Web-Schrift tauschen. Text ist immer sichtbar; der Preis ist ein möglicher FOUT (kurze Änderung des Aussehens).
• optional — trifft die Schrift nicht fast sofort ein, bleibt der Browser bei der Ersatzschrift und verursacht keine Verschiebung. Gut für CLS, um den Preis, dass manche Nutzer Ihre Schrift nie sehen.
• fallback — ein Kompromiss zwischen beiden.

Für die meisten Seiten ist swap eine sichere Wahl, und optional lohnt sich, wenn CLS Ihr Problem ist.

Subsetting: nur genutzte Zeichen ausliefern

Eine vollständige Schrift enthält Tausende Glyphen — Latein, Kyrillisch, Griechisch, mathematische Symbole. Nutzt Ihre Seite nur Latein und einige Umlaute, gibt es keinen Grund, den ganzen Satz zu laden. Subsetting entfernt ungenutzte Glyphen und halbiert die Dateigröße leicht. Werkzeuge wie glyphhanger oder fonttools erledigen das automatisch, und Google Fonts bietet einen &subset=latin-ext-Parameter.

Self-Hosting statt Google-Fonts-CDN

Schriften von fonts.googleapis.com zu laden bedeutet eine zusätzliche Verbindung zu einer Fremd-Domain (DNS, TCP, TLS), bevor die Schrift überhaupt geladen wird. Hosten Sie die Schrift auf Ihrer eigenen Domain, sparen Sie diese Zeit und gewinnen Kontrolle über das Caching. Mit schnellem Hosting und einem CDN trifft eine self-gehostete WOFF2 früher ein als vom Google-Server. Bonus: Sie senden die IP-Adresse des Besuchers nicht an Dritte, was auch der DSGVO-Konformität hilft.

Die sichtbare Schrift vorladen

Die Schrift der Hauptüberschrift sollten Sie vorladen: <link rel="preload" as="font" type="font/woff2" href="/fonts/heading.woff2" crossorigin>. Der Browser lädt sie dann sofort, statt auf das Parsen des CSS zu warten. Laden Sie nicht jede Schrift vor — nur die ein bis zwei sichtbaren.

Die Ersatzschrift angleichen

CLS entsteht, wenn Ersatz- und Web-Schrift unterschiedliche Breiten und Höhen haben und der Text neu umbricht. Die Eigenschaften size-adjust, ascent-override und descent-override in @font-face lassen die System-Ersatzschrift fast denselben Platz einnehmen, sodass der Tausch nahezu unsichtbar ist. Das Werkzeug Fontaine erzeugt das automatisch.

Häufige Fragen

Wie viele Schriften sind zu viele? Jede Schrift und jeder Schnitt (regular, bold, kursiv) ist eine eigene Datei. Beschränken Sie sich auf zwei Schriftfamilien und höchstens 3–4 Schnitte. Alles darüber bremst ohne sichtbaren Nutzen.

Helfen variable Schriften? Ja — eine variable Schrift kann mehrere Schnitte in einer Datei ersetzen und senkt die Zahl der Anfragen. Es lohnt sich, wenn Sie wirklich mehrere Schnitte nutzen.

Auf unseren WordPress-Hosting-Paketen liefern Sie Schriften von einem NVMe-Laufwerk mit kostenlosem CDN aus, sodass Self-Hosting mit voller Geschwindigkeit läuft. Sehen Sie sich unsere Pakete und Preise an.