FOUT steht für Flash of Unstyled Text: Der Text erscheint zuerst in einer Ersatzschrift und wechselt in die Webschrift, sobald diese geladen ist. Laut Google Fonts lädt die Seite dabei mit Systemschriften, bevor sie auf die vorgesehene Schrift umschaltet. Der Text ist also sofort lesbar, nur kurz im falschen Kleid.
- FOUT
Das kurze Aufblitzen von Text in einer Ersatzschrift, bevor die Webschrift geladen ist und ihn ersetzt.
Beispiel: „Auf langsamen Verbindungen sieht man den FOUT deutlich: erst Arial, dann die Hausschrift.“Auch: Flash of Unstyled Text.
Gegenstück: der FOIT, bei dem der Text bis zum Laden unsichtbar bleibt.
Woher der Begriff FOUT kommt
Paul Irish prägte ihn am 7. Oktober 2009, als Webschriften über @font-face gerade verbreitet wurden. Er beschrieb damit, wie Text mit einer Webschrift zuerst in einer Ersatzschrift aufblitzt, und zeigte Wege, den Wechsel zu verkürzen.
FOUT mit font-display steuern
Wann ein Browser die Ersatzschrift zeigt, regelt die Zeitleiste in CSS Fonts 4: In der Blockphase bleibt der Text unsichtbar, in der Swap-Phase steht er in der Ersatzschrift. Mit font-display: swap ist die Blockphase höchstens 100 Millisekunden lang, danach zeigt der Browser sofort den FOUT. Google Fonts empfiehlt, den FOUT vorzuziehen und ihn möglichst früh geschehen zu lassen.
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-display: swap;
}Was den FOUT weniger störend macht
Der Wechsel fällt auf, weil sich Breite und Zeilenumbruch ändern; das kann die Seite verschieben. Ein gut abgestimmter Font-Fallback-Stack mit size-adjust verkleinert den Sprung. Wer gar keinen Wechsel will, nimmt font-display: optional: Dann bleibt die Ersatzschrift, wenn die Webschrift nicht sofort da ist, und das Layout springt laut Spezifikation nie.