How font-display: optional Boosts Core Web Vitals

Web fonts often introduce performance bottlenecks that degrade user experience and search rankings, particularly on mobile devices and unstable network connections. This article explains the CSS font-display: optional property, details how its unique rendering timeline handles slow network conditions, and demonstrates how it directly optimizes key Core Web Vitals metrics, including Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP).

What Is font-display: optional?

The font-display descriptor determines how a font face is rendered depending on whether and when it has finished downloading. When assigned the value optional, the browser is given permission to treat the custom web font as non-critical.

The rendering behavior follows a strict timeline:

• Block period (very short): The browser gives the custom font an extremely short window—typically around 100 milliseconds—to load. During this fraction of a second, text using the font is temporarily invisible.
• Swap period (zero): If the font is not downloaded within that initial window, the browser immediately falls back to a system font. Crucially, the swap period is non-existent. The browser will never replace the fallback font with the custom font during the current page visit, even if the custom font finishes downloading half a second later.

Instead, the browser continues downloading the custom font in the background and saves it to the disk cache. On subsequent page loads, the font is available instantly from the local cache and renders without delay.

How It Protects Users on Slow Networks

On 3G, throttled 4G, or unstable Wi-Fi networks, remote web font files can take several seconds to download. Under default settings (font-display: auto or block), browsers hide text until the font arrives—a phenomenon known as Flash of Invisible Text (FOIT)—leading to blank screens and frustrated users. With font-display: swap, the browser shows a system font first, but swaps it once the custom font arrives, creating a distracting Flash of Unstyled Text (FOUT).

font-display: optional solves this by prioritizing text availability and stability over strict font presentation on the first visit. If network latency prevents the font from loading almost instantly, the browser commits entirely to the fallback font. Users never wait on a slow network to read your content, and the page interface remains static once rendered.

Core Web Vitals Optimization

Applying font-display: optional provides direct improvements to three core performance metrics.

1. Cumulative Layout Shift (CLS)

When a browser swaps a fallback font with a custom web font, differences in letter widths, line heights, and kerning almost always cause lines of text to re-wrap. This shifts surrounding elements down the page, generating a high CLS score.

Because font-display: optional enforces a zero-swap period, it makes mid-session layout shifts caused by web fonts physically impossible. The font used for the first render remains the font for the rest of the session.

2. Largest Contentful Paint (LCP)

The LCP metric marks the point when the main content of a webpage has likely loaded. On many content-heavy pages, the largest visible element above the fold is a heading or text block.

If that text is waiting on a remote font file under slow network conditions, the browser cannot mark the LCP milestone until the font downloads and the text becomes visible. With optional, the browser unblocks text rendering almost immediately using the fallback font, allowing the text element to paint quickly and registering an earlier LCP timestamp.

3. First Contentful Paint (FCP)

By capping the font block window to approximately 100ms, the browser ensures that text elements contribute to the First Contentful Paint without being delayed by long round-trip times (RTT) across poor mobile connections.

Implementation Example

To apply this behavior, declare font-display: optional inside your @font-face rules:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2');
  font-display: optional;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

To maximize the chance that the custom font loads within that initial 100ms window on decent connections, pair this property with a preload hint in your document <head>:

<link rel="preload" href="/fonts/inter-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Preloading initiates the network request at the earliest possible stage, allowing the font to be ready before the browser completes its brief block period, while font-display: optional acts as a fail-safe that prevents performance penalties when network conditions deteriorate.