Effective Strategies for Web Font Optimization: WOFF2, Subsetting, and Layout Stability

Web fonts play a crucial role in web design, yet they can significantly affect page performance if not managed well. Optimizing fonts involves understanding how they are requested by the browser, the formats you use, and the strategies to prevent layout shifts. The following guide presents a systematic approach to web font optimization that includes the use of WOFF2, subsetting, proper loading techniques, and measuring outcomes effectively.

Why Fonts Slow Pages Down

One of the reasons web fonts can slow down pages is how browsers handle font requests. When parsing HTML, a browser doesn't request font files until it encounters a specific font-family directive in the stylesheets. This delay makes web fonts late-discovered resources. Consequently, while the font is downloading, the browser must decide how to render the text. Depending on the font-display property set in CSS, the browser might hide text, display a fallback font, or wait for the web font to load. If the fallback and web fonts have different proportions, developers might experience text reflows, which contribute to Cumulative Layout Shift (CLS). Thus, addressing three key costs is necessary: the time before the font request starts, the file size, and the visual transition during font swapping.

Step 1: Audit What You Ship

The first step in optimizing web fonts is auditing which font files and weights your pages load. Use the browser's DevTools to analyze the Network panel by filtering for "Font" and reloading the pages with the cache disabled. This allows you to log file sizes and ascertain when requests are initiated related to the first paint. You may also check for loaded font faces with JavaScript:

document.fonts.ready.then(() => {
  const loaded = [...document.fonts].filter(face => face.status === 'loaded')
    .map(face => `${face.family} ${face.weight} ${face.style}`);
  console.table(loaded);
});

As websites evolve, they often accumulate unnecessary font weights over time. Review and eliminate any unused weights, as each removal reduces the number of requests and overall page weight.

Step 2: Convert to WOFF2 and Subset

Next, you should convert your font files to WOFF2 format, which offers better compression—typically around 30% smaller than WOFF—and is supported by all modern browsers. There is little justification for shipping older formats like TTF, OTF, or EOT. Moreover, subsetting your fonts to only the characters your content uses can further reduce file sizes. The fonttools package offers a command for this purpose, pyftsubset, to create optimized font files.

pip install fonttools brotli
pyftsubset Inter-Regular.ttf \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153" \
  --layout-features="*" \
  --flavor=woff2 \
  --output-file=inter-regular-latin.woff2

This subsets the font by removing unnecessary glyphs while preserving essential layout features like kerning and ligatures. Always check your font license to ensure you can modify it, and consider that variable fonts can replace multiple static weights with a single file, which may or may not reduce size based on usage.

Step 3: Write the @font-face Rules

When creating your font declarations, use specific unicode-range properties to ensure that browsers only download files relevant to the displayed characters. This optimization not only saves bandwidth but also improves load times.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Selecting the correct font-display value is crucial. The default is block, meaning hidden text until the font loads, which can lead to user frustration. swap, on the other hand, displays fallback text immediately and swaps to the web font once available—a preferable choice for most cases. An optional value can be employed if layout shift risks outweigh typography considerations, particularly for returning users who should benefit from cached fonts.

Step 4: Match the Fallback Font Metrics

To avoid layout shifts during font swapping, it's essential to ensure the fallback font's metrics closely match those of the web font. CSS allows developers to adjust various properties like size-adjust, ascent-override, and others to achieve this effect.

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

body {
  font-family: "Inter", "Inter Fallback", Arial, sans-serif;
}

These values need to be calculated based on the actual metrics of the specific fonts being used. If correctly matched, users should see minimal jump during font loading, enhancing overall user experience.

Step 5: Preload and Cache Correctly

Preloading key font files can expedite their download. Generally, preload the primary font file used for above-the-fold content to minimize perceived load times.

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

It's also important to ensure long-term caching for font files since changes to them are typically infrequent. Implement caching headers to maximize efficiency, which can be easily set up in server configurations. For instance, using ExpressJS can quickly enable static serving with caching options.

const express = require('express');
const app = express();

app.use('/fonts', express.static('public/fonts', {
  maxAge: '1y',
  immutable: true,
}));

Step 6: Measure in the Field

While lab measurements are useful, field data reveals real user experiences. Implement monitoring to record layout shifts and font load timings. A JavaScript snippet can collect and send this information for further analysis.

let cls = 0;
let fontsReadyAt = null;

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) cls += entry.value;
  }
}).observe({ type: 'layout-shift', buffered: true });

document.fonts.ready.then(() => {
  fontsReadyAt = Math.round(performance.now());
});

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;
  const payload = JSON.stringify({ cls: Number(cls.toFixed(4)), fontsReadyAt, path: location.pathname });
  navigator.sendBeacon('/metrics', new Blob([payload], { type: 'application/json' }));
});

This method gathers layout shift and font loading data, serving as a means to understand how optimizing changes impact real users. Aim for measures such as the 75th percentile to better assess experience on slower devices and connections.

Failure Modes and Mitigations