# Web font loading

Category: [Performance & Core Web Vitals](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/) › [Optimization](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/optimization/) · Also known as: font-display, @font-face, webfont

**Web font loading** describes how a page fetches custom font files and what the browser shows while they download. Fonts are declared in CSS with `@font-face`. The `font-display` descriptor decides what visitors see before the file arrives, which affects load time and layout shifts.

## 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.

| Value | Block period | Swap period |
|---|---|---|
| `auto` | browser-defined | browser-defined |
| `block` | short | infinite |
| `swap` | extremely small | infinite |
| `fallback` | extremely small | short |
| `optional` | extremely small | none |

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

```css
@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.

## Related terms

- [Core Web Vitals](https://seo-geo-glossary.com/en/glossary/core-web-vitals/index.md)
- [Web performance](https://seo-geo-glossary.com/en/glossary/web-performance/index.md)
- [Cumulative Layout Shift (CLS)](https://seo-geo-glossary.com/en/glossary/cumulative-layout-shift/index.md)
- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/en/glossary/largest-contentful-paint/index.md)
- [Preload / preconnect](https://seo-geo-glossary.com/en/glossary/preload-preconnect/index.md)

## Sources

- [font-display – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display)
- [Best practices for fonts – web.dev](https://web.dev/articles/font-best-practices)
- [A font-display setting for slow connections – CSS-Tricks](https://css-tricks.com/a-font-display-setting-for-slow-connections/)
- [Modern font loading strategies – OpenReplay (supplementary)](https://blog.openreplay.com/modern-font-loading-strategies/)

---

Last updated: October 7, 2026
URL: https://seo-geo-glossary.com/en/glossary/web-font-loading/