FOIT

FOIT, or Flash of Invisible Text, is the opposite of FOUT. Instead of showing a fallback font while the web font loads, the browser hides all text that depends on the loading font — rendering it completely invisible until the font file arrives. From the user's perspective, they see a page with blank spaces where text should be, sometimes for several seconds on slow connections.

Chrome and Safari historically defaulted to FOIT behavior, hiding text for up to 3 seconds while waiting for web fonts. If the font still hadn't loaded after 3 seconds, they'd fall back to showing system text. This 3-second block window is sometimes called the "FOIT timeout."

The core problem with FOIT is that it prioritizes visual polish over content access. A user on a slow mobile connection might stare at an empty page — unable to read anything — while waiting for a font file that could be 100KB or more. For accessibility and performance, this is generally considered worse than FOUT.

You can trigger FOIT intentionally (though rarely advisably) using:

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair.woff2') format('woff2');
  font-display: block; /* Causes FOIT with 3s timeout */
}

font-display: block instructs the browser to hold a block period where text is invisible, then swap to the web font when ready. It's occasionally appropriate for icon fonts where fallback characters would be meaningless symbols rather than readable text.

A middle-ground option is font-display: fallback, which shortens the invisible block period to approximately 100ms before showing the fallback font:

@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora.woff2') format('woff2');
  font-display: fallback; /* ~100ms block, then fallback, no late swap */
}

With fallback, if the font doesn't arrive within the short block window, the browser shows the system font and won't swap later if the font arrives after a swap period has elapsed. This prevents jarring late swaps while avoiding long invisible periods.

For Core Web Vitals optimization, FOIT directly impacts both Largest Contentful Paint (LCP) — by delaying when text content appears — and Cumulative Layout Shift (CLS) if the swap eventually triggers a reflow. Most performance-conscious implementations today avoid FOIT entirely, preferring font-display: swap combined with font preloading and metric overrides to minimize visual disruption.