CSS font-display Property

CSS font-display Property

The font-display property in CSS controls how web fonts are loaded and displayed on a webpage. It helps improve performance and user experience by defining what happens while a font is loading.

1. Syntax

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

✅ This ensures text is visible immediately, even if the custom font hasn't loaded yet.

2. Available Values

Value	Behavior
auto	Default behavior (browser decides).
block	The text is invisible until the font loads.
swap	Uses a fallback font first, then swaps to the custom font.
fallback	Uses a fallback font if the custom font takes too long to load.
optional	Uses a custom font only if it loads fast enough, otherwise stays with the fallback font.

3. Examples

✅ font-display: swap; (Recommended for Performance)

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
}

✅ Shows fallback text immediately and swaps the font once loaded.

✅ font-display: block; (Avoid Flash of Invisible Text)

@font-face {
  font-family: 'Lobster';
  src: url('lobster.woff2') format('woff2');
  font-display: block;
}

🚨 Text remains invisible until the font loads (not recommended for UX).

✅ font-display: fallback; (Best for Fast Rendering)

@font-face {
  font-family: 'Merriweather';
  src: url('merriweather.woff2') format('woff2');
  font-display: fallback;
}

✅ Uses a fallback font if the custom font takes too long to load.

4. Best Practices

✔ Use swap for the best user experience.
✔ Optimize font loading with preloading (<link rel="preload">).
✔ Use fallback or optional for faster rendering.