Webfonts ohne Wartezeit: font-display, Subsets und Preload

Unsichtbarer Text, springendes Layout und ein zusätzlicher Origin für jeden Besucher — wie Sie eigene Schriften so laden, dass Text sofort erscheint und an seinem Platz bleibt.

Performance · Veröffentlicht: 2. Oktober 2026 · 7 Min. Lesezeit · Марк Лебедев

Eine eigene Schrift ist meist der größte Teil des Designs, der Text blockiert. Bis sie da ist, muss der Browser entscheiden, was er mit jeder Überschrift und jedem Absatz der Seite macht: verstecken oder in etwas anderem anzeigen. Beide Varianten haben ihren Preis, und die Voreinstellungen wählen selten die günstigere für Sie.

FOIT, FOUT und was font-display steuert

FOIT — Flash of Invisible Text — bedeutet, dass der Browser Text versteckt, solange die Schrift lädt. Bei langsamer Verbindung hat die Seite ein Layout, Bilder und Buttons, aber kein einziges Wort. FOUT — Flash of Unstyled Text — ist das Gegenteil: Text wird sofort in einer Ersatzschrift gezeichnet und ausgetauscht, sobald die Webfont eintrifft.

Zwischen beiden entscheidet der Deskriptor font-display in @font-face. Er legt eine kurze *Block-Phase* (Text unsichtbar) und eine *Swap-Phase* fest (Ersatzschrift sichtbar, die Webfont darf sie noch ersetzen):

auto (Standard) und block — in der Praxis eine Block-Phase von bis zu etwa drei Sekunden. Das ist genau der FOIT, den Sie vermeiden wollen.
swap — eine nahezu null lange Block-Phase und eine unbegrenzte Swap-Phase. Text erscheint sofort in der Ersatzschrift, und die Webfont ersetzt ihn, wann immer sie ankommt. Der sichere Standard für Fließtext und Überschriften.
fallback — eine Block-Phase von rund 100 ms und eine Swap-Phase von etwa drei Sekunden. Kommt die Schrift zu spät, bleibt die Seite für diesen Besuch bei der Ersatzschrift. Ein guter Kompromiss, wenn ein später Wechsel mehr stört als eine andere Schriftart.
optional — eine Block-Phase von rund 100 ms und keine Swap-Phase. Der Browser nutzt die Webfont nur, wenn sie fast sofort verfügbar ist, meist aus dem Cache; sonst bleibt die Ersatzschrift. Keinerlei Layoutverschiebung durch Schriften, dafür sehen Erstbesucher im langsamen Netz Ihre Schrift nie.

swap tauscht visuelle Stabilität gegen sichtbaren Text, optional die Markenschrift gegen Stabilität. Für die meisten Websites ist swap für Textschriften und optional für dekorative Schriften ein vernünftiger Ausgangspunkt.

Weniger und kleinere Dateien

Nur WOFF2. Jeder heute genutzte Browser unterstützt es, und die Brotli-basierte Kompression schlägt WOFF und TTF deutlich. Fallbacks wie .woff, .ttf und .eot in src bringen nichts außer Wartungsaufwand.

Subsets. Eine vollständige Schrift mit Latein, Kyrillisch, Griechisch und Vietnamesisch kann um ein Mehrfaches größer sein, als eine Seite braucht. Teilen Sie sie in Teilmengen auf und lassen Sie unicode-range dem Browser sagen, welche Datei er laden soll — ein Subset wird nur geladen, wenn die Seite tatsächlich Zeichen aus diesem Bereich enthält:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Eine englische Seite lädt die kyrillische Datei dann nie, eine russische bekommt beide, weil sie trotzdem lateinische Ziffern und Satzzeichen verwendet. Deutsche Umlaute und das „ß“ liegen im Bereich U+0000-00FF und sind im lateinischen Subset bereits enthalten.

Schnitte begrenzen. Regular, Bold und Italic in zwei Familien sind schon sechs Dateien. Fragen Sie, ob das Design wirklich 300 und 600 braucht. Wenn ja, helfen variable Schriften: Eine Datei deckt die gesamte Gewichtsachse ab (font-weight: 100 900). Eine variable Datei ist meist größer als ein einzelner statischer Schnitt, lohnt sich also etwa ab drei Schnitten, nicht bei einem.

Selbst hosten statt Font-CDN eines Drittanbieters

Laden über Google Fonts heißt: ein Stylesheet von fonts.googleapis.com und danach die Schriftdateien von fonts.gstatic.com — zwei zusätzliche Origins, jeder mit eigenem DNS-Lookup, TCP- und TLS-Handshake, und beide werden erst entdeckt, nachdem Ihr HTML und CSS geparst sind. Das alte Argument, der Besucher habe die Schrift schon von einer anderen Website im Cache, gilt nicht mehr: Alle großen Browser partitionieren den HTTP-Cache inzwischen nach Top-Level-Site, eine auf einer Website gecachte Schrift wird auf Ihrer also erneut geladen.

Selbst gehostete Schriften liegen auf dem Origin, mit dem der Browser ohnehin schon verbunden ist, Sie kontrollieren Subsets und Cache-Header, und jeder Seitenaufruf spart sich eine Drittanbieter-Anfrage. Die Lizenz der Schrift erlaubt das in der Regel; prüfen Sie sie, bevor Sie Dateien kopieren.

Preload für die ein, zwei wichtigen

Der Browser erfährt von einer Schrift erst, wenn er das CSS hat und Text findet, der sie verwendet. Ein Preload startet den Download früher:

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

Das Attribut crossorigin ist auch bei Schriften vom eigenen Origin Pflicht: Schriften werden im CORS-Modus geladen, und ein Preload ohne das Attribut passt nicht zur echten Anfrage — die Datei wird doppelt geladen. Laden Sie nur die Schrift vor, die im sichtbaren Bereich gebraucht wird, typischerweise die Haupttextschrift in einem Subset. Wer jeden Schnitt vorlädt, konkurriert mit CSS und Hero-Bild um Bandbreite und macht die Seite langsamer statt schneller.

Die Ersatzschrift gleich groß machen

Mit swap brechen im Moment des Austauschs die Zeilen neu um, und Blöcke ändern ihre Höhe. Das ist eine Layoutverschiebung und zählt in den CLS. Mit Metrik-Overrides lässt sich eine lokale Schrift an die Proportionen der Webfont anpassen:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: "Inter", "Inter Fallback", sans-serif; }

Die Zahlen oben sind nur ein Beispiel: Berechnen Sie sie für Ihre Schrift mit einem Werkzeug wie Capsize oder Fontaine, oder lassen Sie Ihr Framework sie erzeugen. Gut gemacht, wird der Austausch fast unsichtbar.

Ein Jahr lang cachen

Schriftdateien eignen sich ideal für langes Caching. Setzen Sie eine Version oder einen Hash in den Dateinamen und liefern Sie:

Cache-Control: public, max-age=31536000, immutable

Liegen die Schriften auf einem separaten CDN-Host, muss dieser zusätzlich Access-Control-Allow-Origin senden, sonst verweigert der Browser ihre Verwendung.

Ein SiteScan-Report prüft einen Teil davon: Er markiert Webfonts, die ohne font-display deklariert sind, und empfiehlt, font-display: swap zu setzen.

Checkliste

Jedes @font-face hat ein explizites font-display.
Schriften werden ausschließlich als WOFF2 ausgeliefert.
Die Dateien sind mit unicode-range in Subsets aufgeteilt.
Es werden nur die Schnitte geladen, die das Design nutzt; bei vielen eine variable Schrift.
Die Schriften liegen auf Ihrem eigenen Origin.
Ein oder zwei kritische Schriften werden mit crossorigin vorgeladen.
Die Ersatzschrift hat Metrik-Overrides, um Layoutverschiebungen zu begrenzen.
Schriftdateien haben versionierte Namen und einen unveränderlichen Cache für ein Jahr.

Ebenfalls lesenswert

Prüfen Sie, was davon auf Ihrer Website steckt

Der kostenlose Scan zeigt kaputte Links, JS-Fehler und Performance-Probleme in einer Minute.

Scan starten