FOUT

FOUT, or Flash of Unstyled Text, is a font loading behavior where the browser renders text immediately using a fallback system font, then swaps to the web font once it finishes downloading. The result is a brief but visible flash where text appears in one typeface before switching to another — sometimes causing noticeable layout shifts if the two fonts differ significantly in metrics.

FOUT was the default behavior in Firefox and Internet Explorer for years, and many performance advocates now consider it the preferred behavior compared to its alternative, FOIT. The reasoning: users see content immediately, even if it's temporarily unstyled. Text is readable the moment the page renders, which matters enormously for perceived performance.

The font-display CSS descriptor gives you direct control over this behavior:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Triggers FOUT intentionally */
}

With font-display: swap, the browser shows the fallback font immediately, then swaps to the web font when available. This is the approach Google Fonts uses by default when you append &display=swap to the URL parameter.

The severity of FOUT depends heavily on how closely your fallback font matches your web font. If you're loading Inter and your fallback is Arial, the swap will be jarring. Modern CSS gives you tools to minimize this with size-adjust, ascent-override, descent-override, and line-gap-override — properties that let you adjust fallback font metrics to match the incoming web font:

@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

Tools like the Fallback Font Generator automate this metric matching, dramatically reducing layout shift during the swap. This technique, sometimes called "font metric override," is one of the most effective ways to eliminate Cumulative Layout Shift (CLS) caused by font loading without sacrificing visibility of content.

For most content-heavy sites — blogs, news, documentation — FOUT via font-display: swap is the right default. The brief style change is far less damaging to user experience than invisible text. Reserve other font-display values for cases where visual consistency during load matters more than immediate content access, such as logotype text or branded headlines.