Web font loading

What do the font-display values do?

MDN splits the loading time into a block period (text is invisible), a swap period (a fallback font is shown and replaced once the font arrives) and a failure period.

With swap text appears at once in the fallback font and switches whenever the web font is ready. CSS-Tricks points out that this endless swap period can be disruptive on slow, unstable connections, where fallback or optional behave better. web.dev calls optional the most performant setting, while swap can cause jarring shifts when the font loads.

Loading the files efficiently

• Format. web.dev recommends WOFF2 only and says it compresses about 30% better than WOFF.
• Size. Subsetting removes unused glyphs. Fewer font files or variable fonts reduce requests.
• Early discovery. web.dev suggests preconnecting to third-party font hosts. Preloading a font needs crossorigin, and web.dev cautions that preload takes resources from other priorities.
• Layout shifts. size-adjust aligns the fallback font with the web font so text moves less when the swap happens.

Example

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

FAQ

What is font-display swap? The browser shows a fallback font immediately and replaces it when the web font has loaded.

Which font format should I use? WOFF2, according to web.dev.

Last updated: October 7, 2026