What does font-display: swap do?

font-display: swap shows fallback text immediately while fonts load, then swaps to the custom font when available. This prevents invisible text (FOIT) and improves perceived performance.

When should I use font-display: optional instead of swap?

Use optional for decorative fonts or slow connections. It uses the font only if already cached, otherwise sticks with the fallback. Better for performance on slow networks.

Does font-display affect layout shift?

Yes. font-display: swap can cause Cumulative Layout Shift (CLS) when fonts swap. Minimize this by matching fallback font metrics using size-adjust, ascent-override, and descent-override.

What's the difference between swap, block, fallback, and optional?

swap: immediate fallback, infinite swap. block: brief invisible, infinite swap. fallback: brief invisible, short swap window. optional: brief invisible, no swap (use cached or skip).

Which font-display value is best for SEO?

swap is best for SEO as it ensures text is always visible, improving LCP scores. Google recommends swap for body text and critical content fonts.

Font Display Swap: Complete Guide

Master the font-display CSS property to control how fonts load and render. Learn when to use swap, fallback, optional, and block values.

Key Takeaways

• swap: Best for most cases. Shows fallback immediately and swaps when ready
• fallback: Short block period (100ms), limited swap window
• optional: Best for slow connections. May skip custom font entirely
• block: Hides text briefly. Use sparingly for icon fonts

In this article

Understanding FOIT and FOUT

Both FOIT and FOUT create poor experiences for users, but they manifest differently. The FOUT and FOIT solutions guide covers advanced techniques for eliminating both problems beyond the font-display property alone. The font-display property is declared inside @font-face rules; optimizing those declarations is covered in the @font-face optimization guide.

FOIT (Flash of Invisible Text)

Browser hides text while font loads. Users see blank space.

FOUT (Flash of Unstyled Text)

Browser shows fallback font, then swaps to custom. Users see a shift.

font-display Values

Recommended

font-display: swap

Zero block period, infinite swap period. Shows fallback immediately.

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

font-display: fallback

Short block (~100ms), short swap (~3s). Balanced approach.

font-display: fallback;

font-display: optional

Very short block (~100ms), no swap. Browser decides based on connection speed.

font-display: optional;

font-display: block

Long block (~3s). Use only for icon fonts where fallback would show wrong characters.

Warning: Causes FOIT. Invisible text hurts LCP.

Comparison Chart

Value	Block	Swap	Best For
swap	0ms	Infinite	Most text
fallback	~100ms	~3s	Brand fonts
optional	~100ms	None	Performance-first
block	~3s	Infinite	Icon fonts

Preventing Layout Shift

Using swap causes FOUT which can trigger CLS. Use size-adjust to match fallback metrics. For users relying on assistive technology, font loading behavior also matters since screen readers encounter text as the page renders. The screen reader font compatibility guide explains how font loading affects accessibility. Applying these techniques correctly in production also benefits from a solid CSS foundation; the CSS font implementation guide provides a complete reference for structuring your font declarations.

@font-face {
  font-family: 'CustomFont-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
}

Additional Resources

Loading Strategies

Different font loading approaches

FOUT/FOIT Problems

Solutions for font flash issues

Optimize Your Fonts

Generate optimized @font-face CSS with font-display included.

Generate CSS

Written & Verified by

Sarah Mitchell

Typography expert specializing in font design, web typography, and accessibility

Font Display Swap FAQs

Common questions about font-display CSS property