CSS font-display: optional Performance Benefits

The CSS font-display: optional descriptor provides one of the most effective ways to optimize web font performance, eliminate layout shifts, and safeguard the user experience on unstable networks. By giving the browser strict constraints on how long it can wait for a custom web font before falling back permanently to a system font, font-display: optional prioritizes immediate readability and rendering speed over aesthetic consistency. This article outlines the mechanics of font-display: optional and details the specific performance advantages it offers modern websites.

Understanding font-display: optional

The font-display property determines how a font face is displayed based on whether and when it has downloaded and is ready to use. When configured with optional, the browser follows a strict timeline:

  • Block Period (100ms or less): The browser waits a tiny fraction of a second for the font to load. If it is available, the custom font renders immediately.
  • Swap Period (0ms): If the font is not downloaded within the brief block period, the browser falls back to a system font and gives up on swapping it for the current page view.

The custom font continues downloading in the background to be cached, meaning it will likely be immediately available from disk cache on the user’s subsequent page navigation.

Elimination of Cumulative Layout Shift (CLS)

One of the largest performance issues associated with custom web fonts is Cumulative Layout Shift (CLS). When using descriptors like swap, a fallback font renders first, and once the custom font arrives, the browser swaps them. Because system fonts and custom fonts rarely share the exact same dimensions, this swap causes text to re-flow and shifts elements across the screen.

Because font-display: optional provides a zero-duration swap period, font swapping is completely prevented on slow connections. If the font does not load in the initial render window, the fallback font remains active for the remainder of the session, entirely eliminating font-induced layout shifts and significantly improving your Google Core Web Vitals scores.

Faster Rendering Times (FCP and LCP)

Web fonts can block rendering if the browser waits too long to display text. By restricting the block period to 100 milliseconds or fewer, font-display: optional ensures text is painted almost immediately.

This behavior dramatically improves:

  • First Contentful Paint (FCP): Text is not hidden behind an extended "Flash of Invisible Text" (FOIT).
  • Largest Contentful Paint (LCP): When the largest element on the screen is a text block, rendering it immediately with a fallback font prevents delayed LCP metrics caused by slow external font downloads.

Graceful Degradation on Slow Networks

Mobile users or visitors on high-latency connections suffer the most from heavy web fonts. Browsers recognize font-display: optional as a signal that the font is non-critical. If the browser detects extremely poor network conditions, it can choose not to download the font file at all, saving valuable mobile data and device processing power for the user.

Maximizing Performance with Preloading

To gain the layout-stability benefits of optional while still displaying your custom font on the initial page load for fast connections, pair the CSS rule with a preloaded link tag in the HTML <head>:

<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>

Preloading triggers the font download early in the critical rendering path. Fast connections will fetch the font within the 100ms window, rendering the custom typography right away. Slower connections will safely miss the window and default to the fallback font, preserving optimal page speed and layout stability without penalizing the user.