An introduction to variable fonts

This post introduces variable fonts by explaining their characteristics, how they differ from static fonts, why they are often preferred, and concludes with an example of how to use a variable font on a website.

Background

Both "variable" and "static" fonts are easy to find on popular font websites like fonts.google.com and fonts.adobe.com – and both font types can be deployed on websites through the @font-face CSS rule.

The primary difference between the two is that variable fonts allow properties such as the weight and slant of a font to be configured dynamically through the CSS properties font-variation-settings, font-weight, and font-style.

In comparison, static fonts have fixed properties that are harder to change, even with properties like font-weight and font-style. The font-variation-settings property does not support static fonts and it is specifically designed for variable fonts.

An important difference between the two is that a variable font is distributed as a single file, whereas a static font typically includes multiple files – each representing a different style or weight. With a variable font, the browser only needs to download a single file instead of multiple files for different styles or weights, and that can help improve page load time.

CSS

A variable (or static) font can be included on a website through the @font-face CSS rule. The following example uses a variable variant of the "Noto Sans" font. This version of the font allows the weight and width of the font to be adjusted.

We will define a single @font-face rule for the "Noto Sans" font – and then define three different font weights as separate CSS classes (regular, bold, and extra-bold).

Generally it is recommended to use the font-weight property to set the font weight of a variable font. Based on my personal experiences I have decided to use the font-variation-settings property instead because it gives full control over all font properties (weight, width, slant, and so on).

A single @font-face rule is used rather than three separate rules for each style to ensure only one request is made to the server to download the font file:

@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
}

With our @font-face rule defined, we can now define the CSS classes for the different font weights:

.noto-sans-regular {
  font-family: "Noto Sans";
  font-variation-settings: "wght" 400;
  /* font-weight: 400; */
}
.noto-sans-bold {
  font-family: "Noto Sans";
  font-variation-settings: "wght" 700;
  /* font-weight: 700; */
}
.noto-sans-extra-bold {
  font-family: "Noto Sans";
  font-variation-settings: "wght" 900;
  /* font-weight: 900; */
}

Conclusion

Going forward I plan to default to using variable fonts whenever I want to use a custom, non-standard font on a website. I used static fonts before then – mostly because I didn't fully understand variable fonts, but over time I learnt they're usually the better choice.