Fast-Loading Web Fonts

Shifting layouts, invisible text, a stuttery first page load: custom fonts can add elegance, but they can also add rough edges to a page's performance. The answer is to use fewer font files, smaller file formats, and a loading setup that keeps the design stable.

Use font-display to Control the First Paint

font-display tells the browser how to show text while a font is still loading. MDN describes each value by two periods: during the block period, text is drawn in an invisible fallback font; during the swap period, it is shown in a fallback font and replaced once the web font arrives. swap gives an extremely small block period and an infinite swap period, so text appears at once and the font switches in later. optional gives an extremely small block period and no swap period: if the font is not ready almost immediately, the page keeps the fallback font.

web.dev calls font-display: optional the most performant approach, since text render is delayed for no longer than 100 ms and there are no font-swap layout shifts. swap delays text the least but can cause a layout shift when the font changes, because a web font and its fallback take up different amounts of space. The two can be combined: swap for branding and other distinctive elements, optional for body text.

Cut the Bytes Before You Cut the Polish

WOFF2 is the format to use. web.dev notes that it has the widest browser support of the modern font formats and, because it uses Brotli, compresses 30% better than WOFF. Subsetting cuts further: a subset font keeps only some of the glyphs, for example Latin characters without Cyrillic, and unicode-range lets the browser download a subset only when the page needs it.

Variable fonts can help too. A single variable font can replace several files by packing multiple weights and styles into one. The lightest option is no download at all: font-family: system-ui uses the default font of the reader's device.

Build the Practical Font Setup

Keep custom fonts fast with a short checklist:

• Pick one heading font and one body font, or pair a custom heading font with a system font for body text.
• Load only the weights and styles the design actually uses; a variable font makes a wide range of weights one file.
• Serve WOFF2 and subset the character set to the languages on the site.
• Set font-display: optional for body text and swap only where the exact typeface matters.
• For fonts from a third-party service, add preconnect hints for its origins.

For Google Fonts, web.dev shows a separate hint for the stylesheet and font file origins, with crossorigin on the font file host:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Self-hosting removes that third-party connection, but web.dev notes it is only likely to be faster if the site uses a CDN and HTTP/2, and self-hosted files then need the subsetting and WOFF2 compression that font services usually apply automatically. When fonts make a site feel slow, open the browser developer tools, check the Network tab filtered to fonts, and remove every face that is not needed for the first screen. Tool and menu names can change between browser versions.