Variable fonts how to use. Differences from static fonts. Code examples

Static fonts have a limited set of weights, sometimes limited to three weights/heights for the 100-400 / 500-600 / 700-900 ranges.

Variable fonts contain many variations in font weight, width, and even angle. Each of these parameters is controlled by its own axis. Below is an example of changing the font along the width and weight axes.

Differences from static fonts

Now let’s talk about some of the problems that we encounter when using variable fonts and interesting ways to use variable fonts.

Note that variable font technology has been around for many years. Despite the fact that the technical capabilities of font editors have become very worthy and, as a result, variable fonts can be made easier and simpler, they have not received popularity or mass use. This suggests that either there is no scope for their application or that the product itself does not yet meet the requirements of the market, or the tools do not allow using them. At the moment, not all graphic editors and browsers support the ability to use variable fonts.

The second significant difference between variable fonts is that they are included in the project only as one file, and not as several files of different weights. Moreover, if in your project the font varies only along one axis, the variable font file will take up less space than several files of the same family. However, if the font changes along multiple axes, the file size may exceed 180 KB.

You can create your own version of a variable font using third-party applications. For example, Axis-Praxis, Glyphs or FontLab. In my practice, I used Axis-Praxis, because it is easy to use and does not require installation.

  @font-face {
  font-family: "FontFamilyName";
  src: url("path/FontFamilyName-VF.woff2") format("woff2");
}

Further in CSS, when including fonts, we use the @supports at rule. Thus, we create a check whether the end user’s browser supports variable fonts or not. By the way, support for variable fonts is ~ 94%.

@supports (font-variation-settings: normal) {
  body {
    font-family: FontFamilyName-VF;
  }
}

body {
  font-family: FontFamilyName;
}

There are other methods to tell the browser to interpret the included font as a variable. However, these alternative methods have low browser support. Over time, the @font-face specification will be standardized across all browsers. Currently, you can write a tech(‘variations’) descriptor that will tell the browser that the included font is a variation. and it will look like this.

@font-face {
  font-family: "FontFamilyName";
  src: url("path/FontFamilyName-VF.woff2") format("woff2") tech("variations");
}

The third important difference with variable fonts is that you specify ranges for the font-weight and font-stretch properties instead of specific values.

If these ranges are not explicitly specified, the browser may decide to take the values of these properties not from the loaded font, but substitute its own default values. Therefore, it is important to explicitly specify values for these properties.

You can specify a font weight/width range either inside the @font-face at rule:

@font-face {
  font-family: "FontFamilyName";
  src: url("path/FontFamilyName-VF.woff2") format("woff2");
  font-weight: 350 900;
  font-stretch: 75% 200%;
}

or inside the selector to apply the font to:

@supports (font-variation-settings: normal) {
  body {
    font-family: FontFamilyName-VF;
    font-weight: 350 900;
    font-stretch: 75% 200%;
  }
}

body {
  font-family: FontFamilyName;
}

font-variation-settings

The font-variation-settings property combines the value ranges of the font-weight, font-stretch, font-style properties. The property value is specified using a list of axis-value pairs, where each axis is identified by its four-letter tag (for example, “wght” for bold, “slnt” for slant), and the value corresponds to the numeric position on the axis.

@supports (font-variation-settings: normal) {
  body {
    font-family: FontFamilyName-VF;
    font-weight: 350 900;
    font-stretch: 75% 200%;
    font-style: oblique -10deg;
  }
}

body {
  font-family: FontFamilyName;
}

.menu__item {
  font-variation-settings: "wght" 500, "wdth" 95, "slnt" -8;
}