If you’ve ever opened a webpage and, for a split second, saw plain default-looking text before the “real” font kicked in, you’ve experienced Flash of Unstyled Text (FOUT). It’s that blink where the browser shows fallback fonts before the custom ones load.

Why does FOUT happen?

Web fonts (like Google Fonts or custom typefaces) don’t live on your device by default. They need to be downloaded. While that’s happening, the browser has two choices:

  1. Show fallback fonts immediately (causing FOUT).
  2. Hide the text until the fonts load (causing FOIT: Flash of Invisible Text).

Most browsers lean toward showing something quickly (FOUT) so users aren’t staring at a blank page.

How to get rid of FOUT

  • Preload fonts
html
1<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

This tells the browser to fetch fonts earlier.

  • Use font-display
    In your CSS:
css
1@font-face {
2  font-family: 'MyFont';
3  src: url('/fonts/my-font.woff2') format('woff2');
4  font-display: swap;
5}

swap ensures text appears immediately with a fallback, then swaps to the custom font once ready.

  • System fonts where possible
    Using system fonts (like Arial, Helvetica, or Segoe UI) avoids loading altogether.
  • Cache smartly
    Fonts, once downloaded, should be cached so repeat visits don’t suffer FOUT.

Wrapping up

FOUT is one of those little quirks that reminds us the web is a balancing act: speed vs. style. As UI-focused engineers, our job isn’t just to make things look good, but to make them feel good. A smooth font-loading experience is a small detail that adds up to a polished product.