One Font File, Many Weights: Variable Fonts

A variable font can contain a continuous range of weights, widths, slants, or other variations in one file. Instead of loading separate regular, medium, bold, and black files, the browser can select values from the font’s available axes.

For a font with a weight axis, CSS can request any supported value in the range:

.article-title {
  font-family: "Example Variable", sans-serif;
  font-weight: 650;
}

The font still decides which axes and ranges exist. Variable does not mean every font can become arbitrarily wide, heavy, or italic.

Fewer files, more flexibility

Combining several styles can reduce the number of font requests. It may also reduce the total transferred data when a design uses many weights, though one variable file can be larger than a single static font. The comparison depends on what the page actually needs.

The more interesting benefit is control. A design can use a weight between the usual 600 and 700, or adjust width to suit a component without switching to another file. That works particularly well in responsive layouts and animations.

Browser and font support

Chrome, Firefox, Safari, and Edge already supported variable fonts when this post was written in 2021. Older browsers needed a static fallback, and not every operating system or design application handled every variable font equally well.

Test the actual font, not just the feature in general. Check the styles at both ends of each axis, verify the character set you need, and compare the real download size against the static files it replaces.

I would choose a variable font for the flexibility first. The performance benefit can be real, but only when it replaces enough separate files to earn it.