CSS font-display: swap, optional, fallback Explained

The Font Loading Problem

When a browser encounters a web font, it faces a dilemma: show text immediately in a fallback (risking a visible swap) or hide text until the web font arrives (risking invisible content). The font-display property controls this behavior in your @font-face rule. Without it, browsers use their own defaults, which vary — Chrome hides text for up to 3 seconds, Safari hides it indefinitely. Explicit control ensures consistent behavior across browsers.

Each font-display Value Explained

Five values, each with different trade-offs. ‘auto’ — browser default, unpredictable. Avoid. ‘block’ — invisible for up to 3 seconds, then swaps. Only for icon fonts. ‘swap’ — fallback shows immediately, swaps when font loads. Most common. ‘fallback’ — invisible ~100ms, fallback ~3 seconds, then swaps. Good compromise. ‘optional’ — invisible ~100ms; if font doesn’t load in time, fallback used for entire visit. Best for performance — zero CLS, but font may not appear on first visit.

Choosing the Right Strategy

Choose based on priorities. Content-heavy sites where text must be readable immediately: ‘swap’ with well-matched fallback metrics. Performance-critical sites (e-commerce, landing pages): ‘optional’ — font loads in background and appears on subsequent cached visits with zero CLS. Apps where brand consistency matters: ‘fallback’ as compromise. Icon fonts: ‘block’ because showing a random letter instead of an icon is worse than a brief delay. Use the Google Fonts Explorer to find and preview fonts before choosing a loading strategy.

Matching Fallback Font Metrics

Layout shift from ‘swap’ happens because fallback fonts have different metrics (widths, heights) than your web font. CSS override descriptors can match them: ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%;. This creates a custom fallback that matches your web font’s metrics so closely the swap is nearly invisible. Tools like Fontaine and Next.js font optimization generate these overrides automatically. Combined with ‘swap,’ matched metrics give both instant visibility and minimal shift.