FOIT vs FOUT: What visitors experience

When a browser requests a page with custom web fonts, it has to decide what to show before the font file finishes downloading:

  • Flash of Invisible Text (FOIT): The browser hides text completely until the custom font downloads. The user stares at a frustrating blank white page.
  • Flash of Unstyled Text (FOUT): The browser immediately displays a system font (like Arial or Georgia) and then swaps in the custom web font when it arrives.

FOUT is far better for user experience, but if the fallback font has different character widths, the text swapping causes paragraphs to jump, triggering high Cumulative Layout Shift (CLS).

Why self-hosting beats Google Fonts CDN in 2026

Developers used to believe Google Fonts was faster because browsers shared cached files across different websites. However, modern browsers partition HTTP cache by top-level domain for privacy, meaning that shared cache benefit no longer exists.

Self-hosting your fonts directly on your own domain or CDN (such as Vercel or Cloudflare):

  • Eliminates separate DNS resolution and TLS handshakes to fonts.googleapis.com.
  • Allows you to leverage HTTP/2 and HTTP/3 connection multiplexing.
  • Guarantees GDPR compliance by eliminating third-party IP address logging.

The optimal CSS @font-face implementation

Here is the battle-tested, high-performance font declaration pattern:

/* 1. Preload the primary font in index.html */
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin />

/* 2. Declare @font-face with modern fallbacks */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153; /* Latin subset */
}

/* 3. Match fallback font metrics to prevent CLS */
@font-face {
  font-family: 'Inter-Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

Glyph subsetting: Shrinking font files by 80%

A full Unicode font file contains thousands of glyphs for Cyrillic, Greek, mathematical symbols, and rare ligatures, weighing 150KB to 300KB.

By subsetting the font to include only the characters your site actually uses (such as standard Latin-1), you can reduce a WOFF2 font to just 15KB–25KB. Tools like Fonttools or Glyphhanger make subsetting a seamless build-step command.