FOUT: Flash of Unstyled Text – Erklärung

Wenn eine eigene Webfont mit @font-face in CSS eingebunden ist, das Laden allerdings zu lange dauert und dem User die Fallback-Schriftart schon angezeigt wird, so bezeichnet man das als FOUT. Der FOUT ist dem FOIT aus Sicht der User Experience zu bevorzugen, da es besser ist den Website-Besucher den Text zur Interaktion schnell zur Verfügung zu stellen um einen Absprung zu vermeiden.

Eine Zeit lang wurden asynchrone Font-Loader verwendet um den FOIT zu vermeiden. Hierbei wurden immer zuerst die Fallback-Schriftarten angezeigt und erst dann die eigene Webfont. Dies führt jedoch auch konstant zu einer Layout-Verschiebung. Seit über die Core Web Vitals der KPI-Wert CLS (Cumulative Layout Shift) eingeführt wurde, sind diese jedoch zu minimieren um den Google-Vorgaben zu entsprechen. Deswegen muss jetzt beim Einbinden der Webfont über CSS bei @font-face einfach die Direktive font-display: swap; hinzugefügt werden. Dadurch wird die Fallback-Font nur beim verzögerten Laden der Webfont angezeigt und nicht wie mit Font-Loadern jedes Mal.