Glossary · Performance

Font Loading (FOIT and FOUT)

Font loading behavior decides what users see while web fonts download: invisible text (FOIT), or fallback text that swaps to the web font (FOUT).

Updated October 6, 2026

Font loading describes how a browser handles text while a custom web font is still downloading. FOIT (Flash of Invisible Text) hides the text until the font arrives. FOUT (Flash of Unstyled Text) shows text in a fallback font first, then swaps.

Why it matters

Invisible text delays reading and can hurt FCP and LCP when the text is the main content. A swap avoids the blank period but can shift the layout, which hurts CLS if the fonts have different metrics. The font-display descriptor in @font-face controls the trade-off.

Example

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

Values: swap shows fallback text at once and swaps later. block allows a short invisible period. optional uses the web font only if it loads very quickly, and otherwise keeps the fallback, avoiding shifts. Preload the one or two key fonts and use WOFF2.

Common mistakes

  • Leaving font-display unset, which usually gives a block period of up to about three seconds.
  • Loading six weights when two are used.
  • Preloading fonts without crossorigin, causing a double download.
  • Ignoring fallback font metrics, which produces large shifts on swap.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceBrotli CompressionBrotli is a compression algorithm from Google that usually shrinks text assets 15-25 percent more than gzip and is supported by all modern browsers.Glossary · PerformanceCDN (Content Delivery Network)A CDN is a geographically distributed network of servers that caches your content close to visitors, reducing latency and shielding your origin from load.Glossary · PerformanceGzip CompressionGzip is a widely supported compression format that web servers use to shrink text responses such as HTML, CSS and JavaScript before sending them.Guide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min readGuide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min readGuide · Hosting & CDNCloudflare Cache Rules and Purge: What Gets Cached and How to Clear ItHow Cloudflare decides what to cache, how to read cf-cache-status, build cache rules, set TTLs, and purge by URL, tag, prefix or everything without hurting performance.7 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.