Webfonts schnell laden: font-display, Subsetting, Preload

Kurz gesagt: Schnelle Schriften beginnen mit weniger Schriften: so wenige Familien und Schnitte wie möglich, nur im Format WOFF2 und nur mit den Zeichen, die Sie brauchen. Danach entscheidet font-display, ob Text sofort in einer Ersatzschrift erscheint oder kurz auf den Webfont wartet. Damit der Browser die Schrift früh entdeckt, gehören die Schriftangaben in den Kopf der Seite; Preload ist ein wirksames, aber mit Bedacht einzusetzendes Werkzeug.

Wer beim Laden einer Seite kurz unsichtbaren Text sieht oder beobachtet, wie die Schrift nach einer Sekunde plötzlich wechselt, hat ein Schriftproblem. Es ist selten dramatisch, aber es lässt eine Website unruhig und langsam wirken. Die gute Nachricht: Die wichtigsten Stellschrauben sind überschaubar, und die meisten Annahmen, die darüber kursieren, stimmen nur halb.

Annahmen und was tatsächlich stimmt

„Der Browser lädt jede Schrift, die im CSS steht.“

Was stimmt: Laut web.dev ist das ein verbreiteter Irrtum. Eine @font-face-Angabe allein löst noch keinen Download aus. Der Browser lädt eine Schrift erst, wenn sie tatsächlich auf der Seite verwendet wird. Das heißt aber auch: Er entdeckt den Bedarf oft spät, nämlich erst, wenn das CSS geladen und ausgewertet ist.

„font-display: swap ist immer die beste Wahl.“

Was stimmt: Es kommt darauf an, was Ihnen wichtiger ist. MDN beschreibt die Werte so: block gibt der Schrift eine kurze Sperrphase, in der Text unsichtbar bleibt, und unbegrenzt Zeit zum Austauschen. swap hat eine extrem kurze Sperrphase und ebenfalls unbegrenzte Austauschzeit – der Text erscheint also sofort in der Ersatzschrift, und der Webfont wird eingetauscht, sobald er da ist. fallback hat eine extrem kurze Sperrphase und eine kurze Austauschphase. optional hat eine extrem kurze Sperrphase und gar keine Austauschphase.

web.dev nennt drei Strategien für die meisten Websites:

Leistung zuerst: font-display: optional. Text wird laut web.dev höchstens 100 Millisekunden verzögert, und es gibt keine Layout-Verschiebung durch den Schriftwechsel. Nachteil: Kommt der Webfont zu spät, wird er bei diesem Aufruf nicht verwendet.
Text sofort zeigen und trotzdem den Webfont nutzen: font-display: swap, kombiniert mit möglichst frühem Laden der Schrift. Nachteil: Ein spät eintreffender Font verursacht einen sichtbaren Wechsel.
Text unbedingt im Webfont: font-display: block, ebenfalls mit frühem Laden. Nachteil: Der Text bleibt anfangs unsichtbar.

„Mehrere Formate einbinden ist sicherer.“

Was stimmt: Laut web.dev ist WOFF2 das neueste Format mit der breitesten Browserunterstützung und der besten Kompression; es komprimiert dank Brotli rund 30 Prozent besser als WOFF. web.dev zitiert Experten mit der Empfehlung, nur noch WOFF2 zu verwenden. Zusätzliche Formate machen das CSS komplizierter und können doppelte Downloads verursachen.

„Preload löst alle Schriftprobleme.“

Was stimmt: Preload sorgt dafür, dass der Browser eine Schrift früh entdeckt. web.dev mahnt aber zur Vorsicht: Vorgeladene Schriften nehmen anderen Ressourcen Bandbreite weg. Oft wirksamer ist es, die Ursache zu beheben – etwa die Schriftangaben direkt in den Kopf der Seite zu schreiben, statt sie in einer externen Datei zu verstecken. Preload eignet sich für die eine oder zwei Schriften, die über dem sichtbaren Bereich wirklich gebraucht werden.

„Icon-Fonts sind praktisch und harmlos.“

Was stimmt: Die üblichen font-display-Strategien funktionieren für Icon-Fonts schlecht, weil die Ersatzschrift ganz anders aussieht und Zeichen eine völlig andere Bedeutung haben können. web.dev empfiehlt, Icon-Fonts nach Möglichkeit durch SVG zu ersetzen, was auch der Barrierefreiheit hilft.

Die Maßnahmen in sinnvoller Reihenfolge

Schriften zählen. Öffnen Sie in den Entwicklertools Ihres Browsers den Netzwerk-Tab, filtern Sie nach Schriften und laden Sie die Seite neu. Jede Datei dort ist ein eigener Download.
Schnitte reduzieren. Brauchen Sie wirklich Light, Regular, Medium, Semibold, Bold und jeweils die Kursive? Oft reichen zwei bis drei Schnitte. Eine variable Schrift kann laut web.dev mehrere Schnitte in einer Datei abdecken, und für Fließtext sind Systemschriften (font-family: system-ui) eine Option ganz ohne Download.
Nur WOFF2 ausliefern. Ältere Formate aus dem CSS entfernen.
Subsetting. Eine Schriftdatei enthält oft Zeichen für Dutzende Sprachen. Wer nur Deutsch und Englisch braucht, kann die Datei auf die benötigten Zeichen reduzieren. Laut web.dev übernehmen externe Schriftanbieter das häufig automatisch; bei selbst gehosteten Schriften müssen Sie es selbst tun, etwa mit Werkzeugen wie subfont oder glyphhanger. Mit unicode-range lässt sich zusätzlich steuern, für welche Zeichen eine Datei überhaupt geladen wird.
Schriftangaben früh platzieren. Die @font-face-Regeln und kritischen Stile gehören laut web.dev bei den meisten Websites direkt in den <head> der Seite, damit der Browser nicht erst auf ein externes Stylesheet warten muss.
Bei externen Anbietern früh verbinden. Laden Sie Schriften von einem fremden Server, empfiehlt web.dev preconnect für die beteiligten Adressen; für die Schriftdateien selbst mit dem Attribut crossorigin.
font-display bewusst wählen. Für Fließtext empfiehlt web.dev optional, für Überschriften oder markante Elemente kann swap sinnvoll sein.
Ersatzschrift angleichen. Mit size-adjust und verwandten Angaben lässt sich die Ersatzschrift an die Maße des Webfonts angleichen, sodass der Wechsel kaum auffällt.
Preload gezielt einsetzen. Höchstens für die wichtigste Schrift im sichtbaren Bereich.

Häufige Fragen

Welche font-display-Einstellung nutzen die meisten WordPress-Themes?

Das ist von Theme zu Theme verschieden. Sehen Sie im Quelltext oder in der CSS-Datei nach, welcher Wert in den @font-face-Regeln steht, und passen Sie ihn gegebenenfalls in einem Child-Theme an.

Ist eine variable Schrift immer kleiner?

Nicht unbedingt. Sie lohnt sich vor allem, wenn Sie sonst mehrere Schnitte derselben Familie laden würden. Brauchen Sie nur einen Schnitt, kann die einzelne statische Datei kleiner sein.

Schriften selbst hosten oder von einem Anbieter laden?

Beides kann schnell sein. Externe Anbieter liefern Schriften oft bereits optimiert und in Teilmengen aus, erfordern aber eine zusätzliche Verbindung zu einem fremden Server. Selbst gehostete Schriften kommen vom eigenen Server, dafür müssen Sie Subsetting und Kompression selbst erledigen. Entscheidend ist weniger der Ort als die Zahl und Größe der Dateien.

Merke ich die Optimierung überhaupt?

Auf schnellen Verbindungen oft wenig, auf dem Handy im Mobilfunknetz deutlich. Prüfen Sie die Wirkung mit gedrosselter Verbindung in den Entwicklertools.

Wenn Ihre Website beim Laden mit Schriften kämpft und Sie die Stellschrauben lieber einmal gemeinsam durchgehen wollen – erzählen Sie mir davon.