Web-Font-Optimierung: font-display und FOUT/FOIT

Eine solide Strategie zur Web-Font-Optimierung entscheidet darüber, ob eine Seite schnell und visuell stabil lädt. Wenn Schriften zu spät beim Browser ankommen, bleibt der Text entweder unsichtbar (FOIT) oder wird erst in einer Ersatzschrift gezeichnet und springt dann beim Wechsel (FOUT). In diesem Beitrag erkläre ich, wie du beide Verhaltensweisen mit font-display, preload, WOFF2 und Subsetting steuerst und dabei deine Core-Web-Vitals-Werte schützt.

Der Unterschied zwischen FOUT und FOIT

Beide Abkürzungen beschreiben den Übergangsmoment, während eine eigene Schrift lädt:

• FOIT (Flash of Invisible Text): Der Browser zeichnet keinen Text, bis die Schrift da ist. Der Nutzer sieht eine leere Lücke, und ist die Schrift langsam, kann der Inhalt sekundenlang unsichtbar bleiben.
• FOUT (Flash of Unstyled Text): Der Browser zeigt den Text zuerst in einer System-Ersatzschrift und zeichnet ihn neu, sobald die eigene Schrift geladen ist. Der Inhalt ist sofort lesbar, aber es entsteht ein sichtbarer Versatz, wenn sich die Glyphenbreiten ändern.

FOUT ist meist FOIT vorzuziehen: Der Nutzer beginnt zu lesen, ohne zu warten. Das eigentliche Ziel ist, diesen Übergang gestaltet und sprungfrei zu machen.

Verhalten mit font-display steuern

Der Deskriptor font-display legt fest, wie der Browser Text zeichnet, während die Schrift lädt, und er steht innerhalb der @font-face-Regel:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Was die Werte in der Praxis bedeuten:

• swap: Nach einer sehr kurzen Blockphase erscheint sofort die Ersatzschrift und wird gewechselt, sobald die eigene Schrift da ist. Klassisches FOUT — Text ist nie unsichtbar.
• block: Der Text wartet eine kurze Zeit unsichtbar (etwa 3 s) und fällt dann auf die Ersatzschrift zurück. Hohes FOIT-Risiko.
• fallback: Sehr kurze Blockphase plus ein kurzes Wechselfenster. Kommt die Schrift spät, bleibt sie auf der Ersatzschrift; eine gute Balance für Logos und Markentypografie.
• optional: Der Browser entscheidet je nach Verbindungsgeschwindigkeit selbst, ob er die Schrift überhaupt verwendet. Das minimiert Layoutverschiebung (CLS) und ist ideal für Fließtext.

Für die meisten Content-Seiten sind swap oder optional die sichersten Optionen.

Kritische Schriften mit preload vorziehen

Der Browser entdeckt eine Schrift erst, nachdem er das CSS geladen und ein Element gefunden hat, das sie nutzt — das verzögert ihren Start. Mit <link rel="preload"> kannst du den Download deiner wichtigsten Schrift früh anstoßen:

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

Zwei Details sind wichtig. Das Attribut crossorigin ist für Schriften zwingend (auch wenn du von derselben Origin auslieferst), sonst lädt der Browser die Schrift zweimal. Zweitens: Preloade nur die ein bis zwei Schriften, die wirklich „above the fold“ verwendet werden — jedes Gewicht vorzuladen verschwendet Bandbreite und verzögert andere Ressourcen.

Dateien mit WOFF2 und Subsetting verkleinern

Die Formatwahl ist einer der größten Gewinne. WOFF2 wird heute von jedem modernen Browser unterstützt und komprimiert rund 30 % besser als WOFF. Du musst keine alten TTF/OTF oder WOFF mehr ausliefern — WOFF2 allein genügt.

Der zweite große Gewinn ist Subsetting: nur die Zeichen behalten, die du wirklich brauchst. Eine vollständige Schrift kann Tausende Glyphen enthalten, und eine Seite mit reiner Latein-Schrift zeichnet die meisten davon nie. Mit unicode-range sagst du dem Browser, welcher Bereich in welcher Datei liegt:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

So lädt der Browser die Datei nie, wenn kein Zeichen aus diesem Bereich auf der Seite vorkommt. Subsets kannst du automatisch mit glyphhanger oder pyftsubset aus fonttools erzeugen:

pyftsubset inter.ttf \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153" \
  --flavor=woff2 \
  --output-file=inter-latin.woff2

Layoutverschiebung (CLS) vermeiden

Das Ärgerlichste an FOUT ist der Sprung, weil Ersatzschrift und eigene Schrift unterschiedliche Breiten haben. Modernes CSS löst das weitgehend. Mit size-adjust, ascent-override und descent-override kannst du eine Ersatzschrift nah an die Metriken deiner eigenen Schrift bringen:

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

Schreibst du dann font-family: "Inter", "Inter-fallback", sans-serif;, gibt es beim Eintreffen der eigenen Schrift fast keinen Versatz. Statt diese Metriken von Hand zu berechnen, können Werkzeuge wie Fontaine sie für dich erzeugen.

Checkliste

• Liefere nur WOFF2 aus; lass alte Formate weg.
• Lade nur die Gewichte und Stile, die du wirklich nutzt, und verwirf den Rest.
• Subsette Latein-Text und teile ihn mit unicode-range auf.
• Preloade die ein bis zwei Above-the-fold-Schriften (crossorigin nicht vergessen).
• Wähle swap oder optional für Fließtext.
• Richte Ersatz-Metriken mit size-adjust aus, um CLS gegen null zu drücken.

Häufige Fragen

Sollte ich font-display: swap oder optional verwenden?

Wenn das sofortige Lesen des Textes Priorität hat, nutze swap; deine eigene Schrift erscheint mit Sicherheit. Sind Layoutstabilität und CLS-Wert wichtiger, ist optional sicherer, weil der Browser die Schrift auf langsamen Verbindungen womöglich nie wechselt. Für die meisten Fälle ist optional für Absätze und swap für Überschriften eine gute Kombination.

Ist Google Fonts oder Selfhosting schneller?

Selfhosting auf der eigenen Domain ist heute in der Regel schneller. Browser teilen den Drittanbieter-Cache nicht mehr über Seiten hinweg, der alte Vorteil von Google Fonts ist also weg; die Verbindung zu einer zusätzlichen Domain bringt zudem DNS- und TLS-Latenz. Die WOFF2-Dateien herunterzuladen und mit preload vom eigenen Server auszuliefern, ist schneller und sauberer für den Datenschutz.

Schaden variable Schriften der Performance?

Meist das Gegenteil. Eine einzige variable Schriftdatei ersetzt mehrere Gewichte, die du sonst separat laden würdest; nutzt du drei oder vier Gewichte, sinkt die Gesamtgröße oft. Nur wenn du ein einziges Gewicht und einen einzigen Stil verwendest, kann ein statisches Subset kleiner sein.

Bremsen deine Schriften die Seite aus oder springt der Text? Lass uns die Ladeperformance und Typografie deiner Seite gemeinsam überarbeiten. Kontaktiere mich.