Webfonts Ladezeit verbessern: 5 Schritte ohne Designverlust

Deine Webfonts Ladezeit entscheidet mit darüber, ob Besucher sofort lesen können oder erst auf leere Flächen starren. Schriften sind nur ein paar Dateien, verursachen aber auffällig oft Textflackern, springende Layouts und schlechte Werte bei den Core Web Vitals.

Die gute Nachricht: Du musst dafür weder deine Schrift wechseln noch dein Design verbiegen. Meist reichen ein paar Einstellungen, die du in einer Stunde erledigt hast.

Webfonts Ladezeit: Warum Schriften deine Seite ausbremsen

Ein Browser kann Text erst sauber darstellen, wenn er die Schriftdatei kennt. Er entdeckt sie aber meist spät: erst nachdem er das CSS geladen und gelesen hat. Bis dahin zeigt er entweder keinen Text oder eine Ersatzschrift, die später ausgetauscht wird.

Das trifft zwei Messwerte, die Google beobachtet. Der Hauptinhalt erscheint später (LCP, Largest Contentful Paint), und das Layout verschiebt sich beim Austausch der Schrift (CLS, Cumulative Layout Shift). Wie du beides misst, zeigt dir die Anleitung Core Web Vitals Test mit kostenlosen Google-Tools.

Typisch in Betriebsseiten: vier bis sechs Schriftschnitte, teils doppelt eingebunden – einmal vom Theme, einmal vom Page-Builder. Jeder zusätzliche Schnitt ist ein eigener Download. Wenn du nicht sicher bist, wie deine Seite dasteht, kannst du sie kostenlos analysieren lassen – du bekommst innerhalb von 24 Stunden eine persönliche Auswertung.

Schritt 1: Nur die Schriftschnitte laden, die du brauchst

Jeder Schnitt (Regular, Bold, Italic, Light …) ist eine eigene Datei. Die einfachste Verbesserung der Webfonts Ladezeit ist deshalb, Schnitte zu streichen.

Prüfe in den Entwicklertools deines Browsers unter „Netzwerk“ und dem Filter „Font“, was tatsächlich geladen wird. Oft siehst du Dateien, die keine Seite nutzt. Wer mehrere Gewichte einer Schrift braucht, fährt mit einer Variable Font oft besser: eine Datei, die alle Stärken enthält.

Schritt 2: WOFF2 und Subsetting – Schriftdateien verkleinern

Nutze ausschließlich das Format WOFF2. Es ist stark komprimiert und wird von allen aktuellen Browsern unterstützt. TTF-, OTF- oder WOFF-Dateien als Fallback brauchst du heute praktisch nicht mehr.

Das zweite Mittel heißt Subsetting: Du behältst nur die Zeichen, die du brauchst, etwa Lateinisch inklusive Umlaute, und wirfst kyrillische oder asiatische Zeichensätze raus. Für deutsche Betriebsseiten spart das oft einen großen Teil der Dateigröße. Auch Bilder sind meist ein größerer Hebel als Schriften – wie du sie halbierst, steht in Bilder komprimieren: Größe halbieren.

Was bringt das in der Praxis?

Eine Betriebsseite mit sechs Schnitten aus zwei Quellen lädt oft mehrere hundert Kilobyte nur für Schrift. Nach dem Aufräumen bleiben häufig zwei bis drei Dateien übrig. Die Webfonts Ladezeit sinkt dann spürbar, vor allem auf dem Handy mit schwacher Verbindung. Wie stark, hängt von Schrift, Hosting und Theme ab. Miss deshalb immer vorher und nachher, statt dich auf Faustwerte zu verlassen.

Ehrlich gesagt: Schriften sind selten der einzige Bremsklotz. Bevor du Stunden in Feintuning steckst, schau dir an, was auf mobilen Geräten insgesamt bremst. Die 7 größten Bremsen bei langsamen Seiten auf dem Handy helfen dir bei der Reihenfolge. Auch Lazy Loading kann sinnvoll sein, aber nicht für Schriften – dort gilt das Gegenteil: früh laden, was oben sichtbar ist.

Bei der Webfonts Ladezeit zählt vor allem der Text oberhalb des Falzes, also Überschrift und erster Absatz. Alles, was darunter liegt, darf später kommen. Wenn du nur zwei Dinge umsetzt, dann diese: Schnitte reduzieren und die Überschriftenschrift per Preload laden.

Schritt 3: font-display und Preload richtig setzen

Mit der CSS-Regel font-display legst du fest, was der Browser tut, während die Schrift lädt:

• swap: Sofort Ersatzschrift zeigen, später austauschen. Text bleibt immer lesbar, das Layout kann kurz springen. Für die meisten Seiten die beste Wahl.
• optional: Die Webfont wird nur genutzt, wenn sie sehr schnell da ist. Kein Springen, aber manche Besucher sehen beim ersten Aufruf die Ersatzschrift.
• block: Text bleibt kurz unsichtbar. Meist die schlechteste Option.

Zusätzlich kannst du die wichtigste Schrift per <link rel="preload" as="font" type="font/woff2" crossorigin> früh anfordern. Das Attribut crossorigin ist Pflicht, sonst lädt der Browser die Datei doppelt. Preloade nur ein bis zwei Schnitte, sonst verdrängst du wichtigere Ressourcen. Details beschreibt web.dev in den Best Practices für Schriften.

Gegen das Springen hilft außerdem eine passend abgestimmte Ersatzschrift (CSS-Angaben wie size-adjust). Viele Caching- und Optimierungs-Plugins bieten Schriften-Optionen an; eine Übersicht gibt dir die Caching-Masterclass für WP Rocket & Co..

Schriften und Datenschutz: Selbst hosten statt Google-Server

Bindest du Google Fonts per Link ein, bekommt Google beim Seitenaufruf die IP-Adresse deiner Besucher. Das Landgericht München sprach 2022 deshalb einem Kläger Schadensersatz zu. Die saubere Lösung: Schriftdateien auf dem eigenen Server ausliefern.

Das senkt auch die Webfonts Ladezeit. Der Browser baut keine zusätzliche Verbindung zu einem fremden Server auf, und das früher oft genannte „Die Schrift ist schon im Cache“ gilt wegen getrennter Browser-Caches pro Website nicht mehr. Schritt für Schritt erklärt das Google Fonts lokal einbinden für DSGVO und Speed. Wie schnell die Dateien dann ausgeliefert werden, hängt auch vom Server ab, siehe Time to First Byte verbessern.

Das kannst du heute tun

1. Entwicklertools öffnen, Netzwerk, Filter „Font“: Wie viele Dateien und wie viele Kilobyte lädt deine Startseite?
2. Ungenutzte Schriftschnitte und doppelt eingebundene Schriften entfernen.
3. Alle Schriften als WOFF2 selbst hosten, keine Verbindung mehr zu Google-Servern.
4. font-display: swap setzen, die wichtigste Schrift per Preload laden.
5. Mit PageSpeed Insights vorher und nachher messen, am besten auf dem Handy.

Wer sich um die Webfonts Ladezeit nicht selbst kümmern will: Bei laufender Betreuung gehören solche technischen Feinheiten zum Aufgabenbereich, mehr dazu unter Hosting und Verwaltung bei Agentur Reuber. Wie so etwas in der Praxis aussieht, zeigen die Referenzen von Jonas Reuber. Soll gleich die ganze Seite neu aufgesetzt werden, schau bei Webdesign von Agentur Reuber vorbei.

Mehr zum Messen findest du in Ladezeit der Website messen: Dort siehst du, welche Werte wirklich zählen.

Häufige Fragen zur Webfonts Ladezeit

Wie groß darf eine Webfont sein?

Als Orientierung: Eine einzelne Schrift als WOFF2 sollte nach dem Subsetting deutlich unter 50 KB liegen, alle Schriften zusammen möglichst unter 100 bis 150 KB. Das sind Richtwerte, keine Vorgaben von Google.

Sind Systemschriften die schnellste Lösung?

Ja. Systemschriften wie Arial oder Georgia müssen nicht geladen werden und kosten keine Ladezeit. Dafür sieht deine Seite auf jedem Gerät etwas anders aus. Wenn dir Markenwirkung wichtig ist, bleiben Webfonts sinnvoll.

Was ist besser: swap oder optional?

Für die meisten Betriebsseiten ist swap die sichere Wahl, weil Text immer lesbar ist. optional vermeidet Layoutsprünge, zeigt aber bei langsamer Verbindung die Ersatzschrift.

Muss ich Google Fonts wirklich lokal einbinden?

Wenn du Google Fonts nutzen willst, ist das lokale Hosting der übliche Weg, um die Datenübertragung an Google zu vermeiden. Eine Rechtsberatung ersetzt das nicht; bei Unsicherheit frag deinen Datenschutzbeauftragten oder Anwalt.