Webfonts optimieren: Performance und SEO gleichzeitig sichern

Webfont-Optimierung ist die gezielte Verbesserung der Einbindung von Webschriften, damit sie schnell laden und das Layout stabil bleibt.

Schriften sind oft die unterschaetzte Bremse einer Webseite. Eine einzige Schriftfamilie mit mehreren Schnitten kann mehrere hundert Kilobyte wiegen und blockiert im schlechtesten Fall die Darstellung des Textes. Dieser Leitfaden zeigt, welche Faktoren das Laden von Webfonts verlangsamen, wie sich Layout-Spruenge vermeiden lassen und mit welchen Schritten Schriften gleichzeitig Performance und SEO sichern. Die Grundlagen dazu finden sich im Leitfaden zur technischen Optimierung der Page Speed, auf der jede Detailmassnahme aufbaut.

Vor dem Schreiben: ein gutes SEO-Content-Briefing spart Korrekturschleifen.

Beim Umbau: die SEO-Relaunch-Checkliste sichert die Sichtbarkeit.

Was ist Webfont-Optimierung und warum zaehlt sie fuer SEO?

Webfont-Optimierung bezeichnet alle technischen Massnahmen, die das Laden von Schriften beschleunigen und das Layout waehrend des Ladens stabil halten. Eine Webschrift wird nicht aus dem Betriebssystem geladen, sondern als Datei vom Server geholt. Bis diese Datei da ist, muss der Browser entscheiden, ob er den Text versteckt oder mit einer Ersatzschrift anzeigt.

Der SEO-Bezug ist indirekt, aber messbar. Spaet geladene Schriften verschieben Inhalte und verzoegern die Anzeige des groessten Textblocks. Damit verschlechtern sie Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS), zwei der drei Core Web Vitals. Diese Werte sind Teil des Page-Experience-Signals, das Google als Rankingfaktor fuehrt. Wer Schriften sauber einbindet, verbessert also nicht nur das Nutzererlebnis, sondern auch eine reale Ranking-Stellschraube.

Google fuehrt Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift als Core Web Vitals und damit als Teil der Page-Experience-Bewertung.

Die Disziplin gehoert zur breiteren Praxis des technischen SEO, in der Ladezeit, Crawlbarkeit und Stabilitaet gemeinsam bewertet werden. Schriften sind dort ein klar abgrenzbarer Hebel mit oft grossem Effekt.

Was bremst Webfonts beim Laden aus?

Webfonts bremsen vor allem durch ihre Groesse, ihre Zahl und den Zeitpunkt ihres Ladens. Eine klassische Einbindung mit vier Schnitten in einem alten Format kann leicht ein halbes Megabyte erreichen. Jeder zusaetzliche Schnitt, jede zusaetzliche Sprache und jedes alte Dateiformat erhoeht die uebertragene Datenmenge.

Ein zweiter Bremsfaktor ist die Verbindung. Wird die Schrift von einem Drittanbieter geladen, muss der Browser zuerst eine eigene DNS-Aufloesung und einen TLS-Handshake zu dessen Domain aufbauen. Diese zusaetzliche Verbindung kostet im Mobilfunknetz mehrere hundert Millisekunden, bevor das erste Byte der Schrift ankommt.

Der dritte Faktor ist die Reihenfolge. Browser entdecken Schriften erst, wenn sie das passende CSS gelesen und die betroffenen Elemente im Layout angeordnet haben. Bis dahin ist wertvolle Zeit vergangen. Genau hier setzen Preload und eine schlanke CSS-Struktur an, damit die wichtigste Schrift frueher angefordert wird.

Warum ist das WOFF2-Format so wichtig?

WOFF2 ist das effizienteste verbreitete Webfont-Format und sollte der Standard jeder Einbindung sein. Das Web Open Font Format in der Version 2 nutzt eine Brotli-Kompression und ist dadurch typischerweise rund 30 Prozent kleiner als das aeltere WOFF.

Das Web Open Font Format ist ein vom W3C empfohlener Container fuer Webschriften, dessen Version WOFF2 mit Brotli-Kompression deutlich kleinere Dateien als WOFF erzeugt.

Aeltere Formate wie TTF oder EOT sind heute ueberfluessig. Sie sind groesser, bringen keinen Vorteil und werden von modernen Browsern nicht benoetigt. Wer noch sehr alte Browser bedienen muss, kann zusaetzlich WOFF als Fallback angeben, doch fuer die ueberwiegende Mehrheit der Besucher genuegt eine einzige WOFF2-Datei pro Schnitt. Das halbiert die Zahl der Dateien gegenueber der frueher ueblichen Mehrformat-Einbindung.

Die Geschichte der Web-Typografie zeigt, warum das Format so entscheidend ist. Erst mit komprimierten Webfont-Containern wurde es ueberhaupt praktikabel, eigene Schriften statt System-Schriften auszuliefern, ohne die Ladezeit zu ruinieren.

Sollte man Webfonts selbst hosten oder von Drittanbietern laden?

Self-Hosting ist in den meisten Faellen die bessere Wahl, sowohl fuer Performance als auch fuer den Datenschutz. Liegt die Schrift auf derselben Domain wie die Seite, entfaellt die zusaetzliche Verbindung zu einem fremden Server. Der Browser nutzt die bereits offene Verbindung, was den ersten Abruf der Schrift spuerbar beschleunigt.

Hinzu kommt der DSGVO-Aspekt. Ein vielbeachtetes Urteil des Landgerichts Muenchen I aus dem Jahr 2022 stufte das dynamische Einbinden von Google Fonts, bei dem die IP-Adresse des Besuchers an einen Drittanbieter uebertragen wird, ohne Einwilligung als unzulaessig ein. Self-Hosting umgeht dieses Problem, weil keine personenbezogenen Daten an Dritte fliessen. Mehr zum technischen Rahmen rund um Skripte und externe Ressourcen steht im Leitfaden zu den Grundlagen von JavaScript-SEO.

Der scheinbare Vorteil eines geteilten Browser-Caches bei grossen Schrift-CDNs ist heute hinfaellig. Moderne Browser isolieren den Cache pro Webseite, sodass eine von einem anderen Portal geladene Schrift nicht wiederverwendet wird. Damit faellt das letzte starke Argument fuer das Laden von Drittanbietern weg.

Wie funktioniert font-display und welcher Wert ist richtig?

Der CSS-Deskriptor font-display steuert, was der Browser zeigt, solange die Webschrift noch laedt. Ohne diese Angabe blendet der Browser den Text fuer eine Sperrfrist komplett aus, was als Flash of Invisible Text (FOIT) bekannt ist. Der Nutzer sieht dann eine leere Flaeche, obwohl der Text laengst da waere.

Beim Flash of Invisible Text bleibt Text unsichtbar, bis die Webschrift geladen ist; beim Flash of Unstyled Text wird er zunaechst in einer Ersatzschrift gezeigt und dann ausgetauscht.

Der Wert swap weist den Browser an, sofort eine System-Ersatzschrift zu rendern und die Webschrift nach dem Laden auszutauschen. Der Text ist dadurch von der ersten Millisekunde an lesbar. Der Preis ist ein kurzer Flash of Unstyled Text (FOUT), also ein sichtbarer Wechsel der Schrift. Fuer die meisten Seiten ist swap der richtige Kompromiss, weil Lesbarkeit wichtiger ist als ein optisch perfekter Erststart.

Wer den Schriftwechsel ganz vermeiden will, kann optional verwenden: Der Browser nutzt dann die Webschrift nur, wenn sie nahezu sofort verfuegbar ist, und bleibt sonst bei der Ersatzschrift. Das eliminiert den FOUT, kann aber dazu fuehren, dass die Webschrift beim ersten Besuch gar nicht erscheint.

Welche Techniken sichern Performance und SEO konkret?

Die wichtigsten Hebel lassen sich direkt umsetzen und wirken zusammen. Jeder einzelne senkt entweder die Datenmenge oder verkuerzt den Weg bis zur ersten Darstellung.

• Subsetting: Nicht benoetigte Zeichen aus der Schriftdatei entfernen, etwa kyrillische oder asiatische Glyphen bei deutschem Text.
• WOFF2: Jede Schrift im komprimierten WOFF2-Format ausliefern, alte Formate weglassen.
• Self-Hosting: Schriften auf der eigenen Domain bereitstellen, um Fremdverbindungen zu sparen.
• Preload: Die kritische Schrift per <link rel="preload" as="font" crossorigin> frueh anfordern.
• font-display: Mit swap oder optional den Flash of Invisible Text vermeiden.
• Metrik-Overrides: Mit size-adjust und ascent-override die Ersatzschrift an die Webschrift angleichen.

Preload verdient besondere Aufmerksamkeit. Das Attribut crossorigin ist bei Schriften zwingend, auch beim Self-Hosting, weil Schriften grundsaetzlich im anonymen CORS-Modus geladen werden. Fehlt crossorigin am Preload-Link, laedt der Browser die Datei zweimal und der Vorteil kehrt sich ins Gegenteil. Diese feine HTTP-Eigenheit wird in der Praxis haeufig uebersehen.

Wie vermeidet man Layout-Verschiebungen durch Schriften?

Layout-Verschiebungen durch Schriften entstehen, wenn die Ersatzschrift anders breit und hoch ist als die spaeter geladene Webschrift. Tauscht der Browser die Schrift aus, springt der Text, und der Cumulative Layout Shift steigt. Genau dieser Sprung ist der Grund, warum font-display swap allein nicht reicht.

Die Loesung sind angeglichene Fallback-Schriften. Mit den CSS-Deskriptoren size-adjust, ascent-override, descent-override und line-gap-override laesst sich eine lokale System-Schrift so verzerren, dass sie nahezu dieselben Metriken wie die Webschrift hat. Beim Austausch bleibt die Textflaeche dann gleich gross, und es entsteht kaum noch eine Verschiebung.

Moderne CSS-Deskriptoren wie size-adjust, ascent-override, descent-override und line-gap-override gleichen die Metriken einer Fallback-Schrift an die Zielschrift an und reduzieren so Layout-Verschiebungen.

Wie stark Schriften die Stabilitaet beeinflussen, zeigt sich erst in der Messung. Wer den Cumulative Layout Shift und die uebrigen Core Web Vitals regelmaessig prueft, erkennt Schrift-bedingte Spruenge sofort und kann sie gezielt mit Metrik-Overrides beheben.

Wann lohnt sich ein variabler Font?

Ein variabler Font lohnt sich, sobald eine Seite mehr als zwei oder drei Schriftschnitte derselben Familie nutzt. Ein variabler Font speichert mehrere Schnitte wie Regular, Medium, Bold und deren Kursivvarianten in einer einzigen Datei, deren Achsen sich stufenlos einstellen lassen. Statt vier oder fuenf Dateien laedt der Browser nur eine.

Der Vorteil ist doppelt: weniger HTTP-Requests und in vielen Faellen eine kleinere Gesamtgroesse, weil gemeinsame Glyphen-Daten nur einmal gespeichert werden. Nutzt eine Seite dagegen nur einen einzigen Schnitt, kann eine statische WOFF2-Datei kleiner sein als der variable Font. Die Entscheidung haengt also von der Zahl der tatsaechlich benoetigten Schnitte ab.

Variable Fonts sind in allen aktuellen Browsern verfuegbar und werden ueber dieselben CSS-Eigenschaften angesprochen wie statische Schriften. Sie sind damit kein Experiment, sondern ein etabliertes Werkzeug, das gerade bei typografisch anspruchsvollen Seiten viele Requests einspart.

Welche Mythen halten sich ueber Webfont-Optimierung?

Rund um Webfonts kursieren Annahmen, die zu falschen Prioritaeten fuehren. Drei davon sind besonders verbreitet.

Aus der Praxis: Wie ein Onlineshop die Ladezeit senkte

Schrift-Optimierung wirkt selten spektakulaer, aber zuverlaessig. Das folgende Beispiel ist anonymisiert und konservativ gerechnet.

Wie prueft und ueberwacht man die Schrift-Performance?

Weil sich Schrift-Probleme oft erst auf langsamen Verbindungen zeigen, braucht Webfont-Optimierung eine eigene Messroutine. Drei Schritte genuegen fuer den Anfang.

• Datenmenge pruefen: Im Netzwerk-Tab des Browsers die Groesse und Zahl der geladenen Schriftdateien kontrollieren.
• Core Web Vitals messen: Largest Contentful Paint und Cumulative Layout Shift unter gedrosselter Verbindung erfassen.
• Schriftwechsel beobachten: Mit verlangsamtem Laden pruefen, ob der Text springt oder unsichtbar bleibt.

Diese Werte ergaenzen die uebrigen Performance-Kennzahlen, ersetzen sie aber nicht. Wer sie zusammen mit den Massnahmen zur nachhaltigen Verbesserung des SEO-Rankings betrachtet, erkennt schnell, wie viel eine saubere Schrift-Einbindung zur Gesamtleistung beitraegt. Praktisch bewaehrt sich ein fester Rhythmus: nach jedem groesseren Theme-Update die Schrift-Datenmenge und die Core Web Vitals erneut messen, weil sich mit neuen Komponenten leicht zusaetzliche Schnitte einschleichen.