Web Development

Variable fonts and web performance: when one file beats many

7 min readBy Davinder Kumar Meen

Rows of metal printing type letters above a brass tool and an orange ribbon

A variable font packs many weights and widths of a typeface into one file, so a site that uses several styles can load one font file instead of four, six or more. It helps performance only when you actually use several styles: a single variable file is often larger than one static weight. Whichever you choose, the bigger wins come from loading fonts well: WOFF2, subsetting, a sensible font-display value and fallback fonts sized to avoid layout shift.

Key takeaways

  • Variable fonts are part of the OpenType specification (Font Variations, introduced in OpenType 1.8) and web.dev states that all modern browsers support them.
  • There are five registered axes: weight (wght), width (wdth), italic (ital), slant (slnt) and optical size (opsz); fonts can add custom axes.
  • web.dev cites a Monotype experiment that combined 48 styles into one variable font with an 88% file-size reduction, but also warns that "not everyone benefits from switching to variable fonts".
  • Use the normal CSS properties (font-weight, font-stretch, font-style) where they exist; MDN says font-variation-settings is for axes not available otherwise.
  • font-display and fallback metrics (size-adjust) matter as much as the font format for Largest Contentful Paint and Cumulative Layout Shift.

What is a variable font?

MDN describes variable fonts as "an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style." Instead of fixed files for Regular, Medium and Bold, the font defines axes, and the browser can render any value along each axis, for example a weight of 450 or 625.

The original 2016 version of this article reported the announcement of OpenType Font Variations. Ten years on, the format is mainstream: web.dev states that all modern browsers support it, Google Fonts lets you request axis ranges through its CSS API, and the CSS to use them is stable.

The five registered axes and how CSS reaches them, according to MDN:

Axis Tag CSS property
Weight wght font-weight (any number from 1 to 1000)
Width wdth font-stretch (a percentage, 100% is normal)
Italic ital font-style
Slant slnt font-style: oblique <angle>
Optical size opsz font-optical-sizing (auto or none)

Custom axes use four-letter uppercase tags, such as GRAD for grade, and are set with font-variation-settings.

Do variable fonts make a website faster?

Sometimes. It depends on how many styles you load now.

Your site uses Likely better choice Why
One or two weights of one family Static fonts, or the system font stack A single static file is usually smaller than a variable file
Three or more weights, or weights plus widths One variable font One download replaces several; fewer requests to prioritise
Many styles across headings, body and UI Variable font, subsetted The biggest savings reported (web.dev's Monotype example: 48 styles, 88% smaller)
Body text only, performance first System fonts No download at all

web.dev puts it plainly: variable fonts "are often larger than single-style files" and pay off most for sites that use many styles and weights. So count what you load before you switch. Open your browser's network panel, filter by "Font", and add up the files and their sizes on a typical page.

Variable fonts also give design freedom that static files cannot: headings can use an in-between weight, condensed widths can fit long words on small screens, and optical size can adjust letter shapes for small and large text. That is a design benefit, not a speed one, but it often comes free with a variable family.

How should you load a variable font?

The loading pattern matters more than the format. These are the practices from web.dev's font best practices guide, applied to a variable font.

1. Serve WOFF2 only. web.dev's advice is "Use only WOFF2 and forget about everything else"; it uses Brotli compression and is smaller than WOFF.

2. Declare the axis ranges in @font-face. This tells the browser one file covers a range of weights or widths:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 125%;
  font-display: swap;
}

h1 { font-family: "Brand Sans", system-ui, sans-serif; font-weight: 650; }

MDN notes that browsers which support variable fonts also accept plain format("woff2").

3. Subset. Remove glyphs you do not need, or split by script with unicode-range so a file downloads only if the page contains matching characters. web.dev notes that removing unused glyphs "can significantly reduce the filesize", and reminds you to check the font licence allows subsetting. This matters for sites that publish in more than one script, for example English and Hindi or Punjabi.

4. Choose a font-display value on purpose. swap shows text immediately in a fallback font, at the risk of a visible shift when the web font arrives. optional gives the best performance and avoids swap shifts, but the web font may not be used if it arrives late. web.dev suggests swap for branding and distinctive elements and optional for body text.

5. Match fallback metrics. Use the size-adjust descriptor (with ascent-override and similar) on a local fallback font so the swap from fallback to web font moves the layout as little as possible. This is the main fix for font-related CLS.

6. Preload sparingly. Preloading the one font used in the first visible heading can help, but web.dev warns that preload takes browser resources from other downloads and ignores unicode-range, so use it only for the most important file.

If you use Google Fonts, its CSS API v2 lets you request a range instead of fixed weights, and add display=swap:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900&display=swap

Google's documentation says older browsers that lack variable font support receive fallback static weights around the range you request. For third-party font hosts, web.dev recommends a preconnect hint, plus a second one with crossorigin for the font files.

Self-host or use a font service?

Either can be fast. web.dev points out that self-hosting is not automatically quicker: without a CDN, HTTP/2, WOFF2 and subsetting, which font services usually handle, "it's much less likely that self-hosted fonts deliver better performance." Self-hosting does give you full control over caching and removes a connection to another domain, and it can simplify privacy notices. Pick the one you can configure properly.

What mistakes should you avoid?

  • Animating axes everywhere. web.dev warns that animating variable fonts can hurt performance; pause off-screen animations and throttle input-driven effects.
  • Using font-variation-settings for weight. Use font-weight. MDN notes font-variation-settings does not stop invalid values outside the declared range, and web.dev notes it does not inherit the way you might expect: unset axes reset to their defaults.
  • Extreme settings for body text. Very light, very condensed or very heavy settings hurt legibility.
  • Icon fonts. web.dev says icon fonts are "more likely to cause significant layout shifts"; use SVG icons instead.
  • Loading a variable file and static files of the same family. You pay twice.

Fonts are one part of a fast page. Our guide to Core Web Vitals and the fixes that matter covers the rest, and UX and UI design trends in 2026 covers how type fits current interface expectations.

How does this fit into a website design project?

Typography decisions are cheapest at the design stage: choose a family, decide which weights and widths the design really needs, and test the font loading on a slow mobile connection before build. Our website design team plans type and performance together, and our branding work covers choosing typefaces that fit a brand. If your current site loads a long list of font files, it is often one of the simpler speed fixes in a custom web design refresh.

FAQ

Do all browsers support variable fonts?

web.dev states that all modern browsers support them. For very old browsers, wrap variable-only styling in @supports (font-variation-settings: normal) or rely on Google Fonts' static fallbacks.

Is a variable font always smaller?

No. One variable file is often larger than a single static weight. It saves bytes when it replaces several static files.

Should I use font-display: swap or optional?

swap shows text immediately and suits brand headings; optional avoids late swaps and suits body text. web.dev suggests combining them this way.

Do variable fonts affect Core Web Vitals?

They can. Fonts affect Largest Contentful Paint when the main heading waits for a font, and Cumulative Layout Shift when the fallback and web font differ in size. Good loading and matched fallback metrics address both.

Can I use variable fonts from Google Fonts?

Yes. Request an axis range in the CSS API v2 URL, for example wght@200..900, and add display=swap or another value.

Can I subset a commercial font?

Only if its licence allows it. Check before you subset or self-host.

Sources (7 links)
Share this article