Webfonts sehen gut aus, kosten aber oft unnötig Ladezeit. Gerade große .woff- oder .woff2-Dateien können die Rendering-Performance verschlechtern, den Largest Contentful Paint verzögern und damit sowohl Nutzererlebnis als auch SEO negativ beeinflussen. Google empfiehlt, Webfonts gezielt zu optimieren, unter anderem durch korrektes Laden, frühe Verbindungsaufbauten und vor allem durch Subsetting, also das Reduzieren einer Schrift auf die wirklich benötigten Zeichen.

Große .woff-Dateien verlangsamen deine Website: So optimierst du Webfonts für bessere PageSpeed

Wer an der falschen Stelle spart, lädt schnell komplette Fonts mit hunderten oder tausenden Glyphen, obwohl die Website vielleicht nur deutsche, englische oder französische Inhalte ausspielt. Das Ergebnis: unnötig große Font-Dateien, mehr Netzwerk-Last und langsamere Seiten. Genau hier setzt eine saubere Font-Optimierung an.

Warum große WOFF-Dateien ein Problem sind

Viele Websites laden komplette Schriftfamilien inklusive verschiedener Schnitte, Zeichensätze und Sprachräume. In der Praxis braucht eine Unternehmenswebsite aber oft nur einen kleinen Teil davon. Wenn trotzdem die vollständige Datei geladen wird, steigt die Dateigröße ohne echten Mehrwert.

Das Problem ist nicht nur die Downloadgröße. Webfonts müssen außerdem entdeckt, angefordert und verarbeitet werden. Werden sie zu spät geladen, kann das zu Flash of Invisible Text oder Layout-Verschiebungen führen. Web.dev empfiehlt deshalb, Webfonts so zu optimieren, dass sie früh verfügbar sind, sparsam ausgeliefert werden und nur die wirklich nötigen Zeichen enthalten.

Fonts richtig laden: Preload und Preconnect

Ein häufiger Hebel für schnellere Ladezeiten ist die Reihenfolge, in der Browser kritische Ressourcen entdecken. Wenn eine wichtige Schrift für den sichtbaren Bereich gebraucht wird, kann preload sinnvoll sein. Damit weist du den Browser an, die Font-Datei frühzeitig zu laden.

Ein typisches Beispiel:

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

Das ist besonders dann nützlich, wenn die Schrift im Above-the-Fold-Bereich gebraucht wird, zum Beispiel für Headline oder Navigation. So muss der Browser nicht erst CSS parsen und anschließend die Font-Datei entdecken.

Wenn Fonts oder Stylesheets von einer externen Domain kommen, hilft zusätzlich preconnect. Dadurch wird die Verbindung zu einer externen Origin früh aufgebaut. Laut web.dev kann das je nach Situation etwa 100 bis 500 Millisekunden sparen, weil DNS, TCP und TLS schon vorbereitet werden. Für weniger kritische Fälle kann dns-prefetch als ergänzender oder fallback-artiger Hinweis sinnvoll sein.

Beispiel:

<link rel="preconnect" href="https://fonts.example-cdn.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.example-cdn.com">

Wichtig ist dabei: Nicht wahllos alles preconnecten. Diese Technik sollte nur für wirklich kritische Domains eingesetzt werden, die sehr früh im Seitenaufbau benötigt werden. Auch das empfiehlt web.dev ausdrücklich.

Der größte Hebel: Fonts subsetting statt komplette Zeichensätze laden

Die effektivste Optimierung ist oft nicht das schnellere Laden, sondern das kleinere Ausliefern. Genau dafür gibt es Font-Subsetting. Dabei entfernst du alle Glyphen, die deine Website gar nicht benötigt.

Google nennt Subsetting ausdrücklich als Best Practice für die Webfont-Optimierung. Statt einen kompletten Zeichensatz mit mehreren Schriftsystemen zu laden, sollte nur das ausgeliefert werden, was auf der Website tatsächlich vorkommt. Für eine deutschsprachige Website reicht oft Latin oder Latin Extended, je nach Inhalt.

Ein praktisches Beispiel:
Wenn deine Website nur deutschsprachige Inhalte enthält, brauchst du in der Regel keine kyrillischen, griechischen oder arabischen Glyphen. Selbst innerhalb von Latin-Zeichen lassen sich häufig unnötige Sonderzeichen entfernen, wenn sie im Content nie vorkommen.

Dadurch sinkt die Dateigröße oft deutlich. Das verbessert die Ladezeit, reduziert den Netzwerk-Overhead und beschleunigt die Darstellung der Website.

Welche Glyphen werden wirklich benötigt?

Bevor du einen Font reduzierst, solltest du wissen, welche Zeichen deine Website tatsächlich verwendet. Genau dafür ist ein Glyph-Inspector hilfreich.

Mit dem Glyph Inspector von opentype.js kannst du eine Schriftdatei analysieren und dir die vorhandenen Glyphen ansehen. Das Tool erlaubt einen Blick in die Zeichenstruktur der Font und hilft dabei, unnötige Zeichensätze oder Glyphen besser zu verstehen. Gerade bei größeren oder komplexeren Font-Dateien ist das nützlich, um zu erkennen, wie „aufgebläht“ eine Schrift wirklich ist.

Tool: Glyph Inspector
https://opentype.js.org/glyph-inspector.html

Der praktische Nutzen: Du kannst prüfen, ob eine Font sehr viele Zeichen mitliefert, die du für eine deutschsprachige Website niemals brauchst. Das ist eine gute Grundlage, bevor du die Datei in einem Online-Tool weiter optimierst.

WOFF-Dateien online optimieren mit Transfonter

Ein sehr nützliches Tool für die Praxis ist Transfonter. Es kann Fonts in Webformate umwandeln und bietet dabei Optionen für @font-face, verschiedene Ausgabeformate, font-display, Unicode-Ranges und vor allem Subsets. Das Tool unterstützt unter anderem TTF, OTF, WOFF und WOFF2 und erlaubt die Auswahl von Sprach-Subsets wie Latin, Latin Extended oder Cyrillic.

Tool: Transfonter
https://transfonter.org/

So kannst du eine Font online optimieren:

Lade die Ausgangsdatei hoch, zum Beispiel TTF, OTF oder WOFF.
Wähle das gewünschte Webformat, idealerweise WOFF2.
Aktiviere nur die benötigten Subsets, etwa Latin oder Latin Extended.
Definiere nach Bedarf eigene Zeichen oder Unicode-Ranges.
Setze font-display auf swap, damit Texte sofort sichtbar bleiben.
Exportiere die optimierte Font-Datei samt CSS.

Gerade für kleinere Websites oder einzelne Schriftfamilien ist das ein schneller Weg, um unnötige Dateigröße abzubauen.

Latin oder Latin Extended?

Hier passieren in der Praxis viele Fehler. Wer nur Latin auswählt, spart zwar Dateigröße, riskiert aber fehlende Zeichen. Für deutschsprachige Websites sollte geprüft werden, ob Umlaute, Akzente, typografische Sonderzeichen oder Inhalte in weiteren europäischen Sprachen benötigt werden.

Wenn deine Website ausschließlich sehr einfache deutsche Inhalte ohne viele Sonderzeichen nutzt, kann Latin reichen. In vielen echten Projekten ist Latin Extended jedoch die sicherere Wahl. Die Entscheidung sollte nicht aus dem Bauch heraus getroffen werden, sondern anhand des realen Contents.

Zusätzliche Best Practices für Font-Performance

Neben Preload, Preconnect und Subsetting gibt es noch weitere wichtige Punkte:

Verwende möglichst WOFF2, weil dieses Format in der Regel deutlich effizienter ist als ältere Font-Formate. Lade nur die Schriftschnitte, die du wirklich brauchst. Viele Websites binden Regular, Medium, SemiBold, Bold, Italic und weitere Varianten ein, nutzen im Frontend aber nur zwei davon. Auch das ist verschenktes Potenzial.

Ebenso wichtig ist font-display. Ein sinnvoller Wert wie swap sorgt dafür, dass Text zunächst mit einer Fallback-Schrift sichtbar bleibt und später in die Webfont wechselt. So bleibt die Seite nutzbar, auch wenn die Font noch lädt.

Beispiel:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-display: swap;
}

Wann Preload sinnvoll ist und wann nicht

Nicht jede Schrift sollte per preload geladen werden. Diese Technik ist vor allem für kritische Fonts gedacht, die im sichtbaren Bereich sofort gebraucht werden. Wer zu viele Ressourcen preloaded, kann den Browser auch fehlleiten und andere wichtige Assets verdrängen.

Eine gute Faustregel: Nur die wichtigste Font-Datei für den First View preloaden, nicht die komplette Schriftfamilie. Weitere Schnitte oder selten genutzte Varianten können normal über CSS nachgeladen werden.

Typische Fehler bei der Font-Optimierung

Ein häufiger Fehler ist das Einbinden von Google Fonts oder externen CDNs ohne Prüfung, ob die Schrift nicht besser lokal gehostet werden sollte. Ein anderer ist das Laden kompletter Font-Pakete trotz sehr kleiner tatsächlicher Nutzung.

Ebenso problematisch: mehrere Schriftschnitte, mehrere Formate und mehrere Sprachsets gleichzeitig ausliefern. Das summiert sich schnell zu mehreren hundert Kilobyte – nur für Typografie.

Auch fehlende Abstimmung zwischen Design und Performance ist oft ein Problem. Aus gestalterischer Sicht mögen viele Schriftschnitte attraktiv sein. Aus Performance-Sicht ist eine schlanke, sauber subsettete Font-Strategie meist die bessere Entscheidung.

Fazit: Kleine Fonts, schnellere Website, bessere SEO

Große .woff Schrift-Dateien sind ein unterschätzter Bremsklotz für die Ladezeit. Wer seine Webfonts optimiert, gewinnt an mehreren Stellen gleichzeitig: schnellere Ladezeiten, bessere Core Web Vitals, saubere Darstellung und bessere Chancen auf gute Rankings.

Die wichtigsten Maßnahmen sind klar: kritische Fonts gezielt preloaden, externe Font-Quellen bei Bedarf per preconnect vorbereiten, nur benötigte Schriftschnitte laden und vor allem Fonts subsetten. Genau hier helfen Tools wie der Glyph Inspector von opentype.js zur Analyse und Transfonter zur praktischen Online-Optimierung. Web.dev empfiehlt diese Richtung ausdrücklich und hebt besonders das Reduzieren auf benötigte Zeichen als wirksame Maßnahme hervor.

Wer PageSpeed ernst nimmt, sollte sich deshalb nicht nur mit Bildern und JavaScript beschäftigen, sondern auch mit Webfonts. Gerade dort liegt oft erstaunlich viel ungenutztes Optimierungspotenzial.

Frage 1