FOIT steht für Flash of Invisible Text: Der Browser hält den Text zurück, bis die Webschrift geladen ist, und zeigt an seiner Stelle eine leere Fläche. Laut Google Fonts lädt die Seite dabei, ohne dass die Schrift überhaupt erscheint. Auf schnellen Verbindungen merkt man das kaum, auf langsamen wirkt die Seite kaputt.
- FOIT
Die Phase, in der Text unsichtbar bleibt, weil der Browser auf eine Webschrift wartet.
Beispiel: „Im Zug war der FOIT deutlich: Bilder und Buttons waren da, die Überschriften fehlten noch.“Auch: Flash of Invisible Text.
Gegenstück: der FOUT, bei dem der Text sofort in einer Ersatzschrift erscheint.
Wie lange der FOIT dauert
In CSS Fonts 4 heißt die Phase Blockperiode: Der Text wird mit einer unsichtbaren Ersatzschrift gesetzt. Für font-display: block empfiehlt die Spezifikation meist 3 Sekunden. Chromium und Firefox warten im Standardfall genau so lange, das zeigen ihr Quellcode und ihre Einstellungen. WebKit begrenzte den unsichtbaren Text laut WebKit-Blog 2016 ebenfalls auf 3 Sekunden; ältere Versionen warteten unbegrenzt.
FOIT vermeiden mit font-display
Die Werte swap und fallback verkürzen die Blockperiode auf höchstens 100 Millisekunden. Danach erscheint der Text in der Ersatzschrift, also als FOUT. optional zeigt die Webschrift nur, wenn sie zum ersten Bildaufbau schon da ist. Laut MDN ist font-display seit 2022 in allen großen Browsern weit verfügbar.
Warum FOIT schlechter ist als FOUT
Unsichtbarer Text bedeutet, dass Besucher nichts lesen können, obwohl der Inhalt längst angekommen ist. Google Fonts empfiehlt deshalb, den FOUT vorzuziehen. Eine kurze Blockzeit von bis zu 100 Millisekunden ist sinnvoll, weil eine schnell geladene Schrift dann ohne sichtbaren Wechsel erscheint.