FOIT

FOIT, or Flash of Invisible Text, is a web typography rendering phenomenon in which text content remains invisible while a web font is loading. It contrasts with FOUT, the Flash of Unstyled Text, where the text appears in a fallback font and then switches to the custom font once it loads. FOIT occurs when the browser blocks rendering of text until the web font is fully downloaded and parsed, so the glyph metrics are not available to display.

Causes and context: FOIT is tied to how @font-face fonts are loaded and how font-display settings are configured. Slow network conditions, large font files, cross-origin restrictions, or servers with high latency can increase the likelihood of FOIT. The effect is typically more noticeable on first paint or when a font is hosted remotely.

Impact: FOIT can degrade perceived performance and readability, as users see a blank area instead of text for a period of time. When the font finally renders, glyph metrics may cause layout shifts as the text reappears with the new font. The severity depends on font size, line length, and how critical the font is to the page's design.

Mitigation strategies: Use font-display values such as swap or fallback to ensure text is visible immediately with a fallback font while the custom font loads. Preload fonts with link rel="preload" as="font" crossorigin, subset fonts to essential glyphs, and serve fonts in modern formats like WOFF2. Consider font loading strategies that balance readability and performance, or rely on system fonts for critical content to reduce dependence on external fonts.

---