Regular Web fonts will create files for each font with weight and style. For example, if you want three different fonts (regular, Medium, Bold) and two styles (regular, italic), you’ll need six different font files.

Loading so many font files can be a lot of network overhead, and each font file is not small, which can have a significant impact on web page performance. Variable fonts are a good solution to this problem, and modern browsers already support this feature.

Variable fonts are an evolution of the OpenType font specification that allows multiple variants of the same font to be consolidated into a single font file. This eliminates the need to separate fonts of different width, weight or style into different font files. You can retrieve the font variants contained in this single file using CSS with a single line @font-face reference.

The idea with mutable fonts is that fonts have parameters that can be adjusted to control the output of the font.

In standard fonts, you can choose only two or three word weights, but with variable fonts, you can choose from hundreds.

And mutable fonts are not just simple bold fonts, but very customizable, as shown below:

At the heart of the new format for variable fontsThe variable axial“, which describes the permissible range of variation for a feature in font design. For example, ‘font axis’ describes the thickness of the font; The width axis describes the width of the font; “Italic axis” describes whether italics are used and can be switched accordingly; And so on. Note that the axis can be either a range selection or a switch selection. The word weight may be between 1-999, while italics may simply be 0 or 1 (off or on).

As defined in the specification, there are two types of deformation axis, registered axis and custom axis:

• The registry axis is the most common, so common that the authors of the specification feel the need to standardize. The five axes currently registered are word weight, width, slope, italic and optical dimensions. The W3C has mapped them to existing CSS properties and introduced a new property in one case, which you’ll see below.
• Custom axes are virtually unlimited: font designers can define and define any axis they like, and just give it a four-letter (uppercase) label to identify it in the font file format itself. You can use these four-letter labels in your CSS to specify points along that axis of change, as you will see in the code example below.

Variable fonts include 5 standard adjustable registration shafts

• WGHT defines the design axis of the range of stroke weight (called weight in printing terminology) for a font. For a long time, CSS can passfont-weight) this takes values between 100 and 900 in increments of 100 and similarnormal 或 boldSuch that the keyword has aliases (in this case 400 and 700) with corresponding numeric values. These numbers or keywords are still used when working with non-mutable or variable fonts, but for mutable fonts, any number between 1 and 1000 is valid.
• WDTH (Width) defines the design axis of how narrow or wide a glyph can be (called compression or extension in printing terminology). This is usually used in CSSfont-stretchProperty setting, the value of which is expressed as a percentage above or below “normal” (100%), any number greater than 0 is technically valid
• Ital can only be opened (1) or closed (0); There is no median
• SLNT (Slant) differs from true italics in that it changes the font Angle but does not perform any type of character substitution. It is also mutable because it is represented as a numeric range. This allows the font to change anywhere along the axis. The permissible range is usually 0 (upright) to 20 degrees
• Opsz (Optical Size) refers to the practice of changing the overall stroke thickness of a font based on its physical size. If the size is very small (equal to 10 or 12px, for example), the character will have an overall thicker stroke, and other small modifications may be made to ensure that it is copied and readable at a smaller physical size. Conversely, when using a larger size (such as 48 or 60px), the stroke weight may vary more and the appearance will be closer to the original design intention.

Use variable fonts on Google Fonts

Google Fonts includes a number of variable fonts that can be used directly or downloaded to a local server (to avoid blocking users from downloading font files). Add the following link tag to the HTML file to use the variable font provided by Google directly:

<link rel="preconnect" href="<https://fonts.gstatic.com>">
<link href="<https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0.100.900;1.100.900&display=swap>" rel="stylesheet">
Copy the code

Family =Raleway:ital, WGHT =Raleway, ital after colon, WGHT = register axis property, @ = register axis value. Such as 0100.. 900 indicates that the weight of a normal font is between 100 and 900; 1100.. 900 indicates italics and the word weight value ranges from 100 to 900. Display =swap represents the value of the font-display property. If you want to know how the font-display property works, refer to the previous article.

Use self-hosted variable fonts

Once you’ve downloaded a free variable font from Google Fonts or another third party, you can use it in the @font-face declaration:

@font-face {
  font-family: 'Recursive';
  src:
    url('/fonts/recursive-variable.woff2') format('woff2 supports variations'),
    url('/fonts/recursive-variable.woff2') format('woff2-variations');
  font-weight: 300 1000;
  font-display: fallback;
}
Copy the code

If we want to use a “custom” variant, such as “casual”, we need to indicate that it is a special.woff2 format. This was originally done with Woff2 – Variations, but has since been updated to woff2 Supports Variations. In this period of transition, we need both.

font-weight: 300 1000; Indicates the range of word weights we can use between 300 values and 1000 (inclusive)

Then we can use variable fonts in CSS:

.hello {
  font-weight: 777;
}
Copy the code

With a variable font, you can specify any value within the weight range of the word in @font-face, rather than choosing between integers like traditional fonts.

For customizable variable fonts, we can use the font-variation-settings property to set the registry axis property

Font -variation-settings accepts a comma-separated list of Settings. Each setting adjusts an axis (a four-letter string in quotes) and a value (always a number)

Each built-in axis can also be specified with a pure CSS declaration:

.with-settings {
  font-variation-settings:
    "wght" 750."wdth" 125."slnt" -10;
}

/* equals the following CSS: */
.without-settings {
  font-weight: 750;
  font-stretch: 125%;
  font-style: oblique -10deg;
}
Copy the code

Custom axis properties must be capitalized to distinguish between built-in and custom axes:

.fun-heading {
  font-variation-settings:
    "slnt" -10, /* Built-in shaft, "slant" */"CASL" 0.8, /* Custom axis, "casual" */"CRSV" 1; /* Custom axis, "cursive" */
}
Copy the code

Note: Each font has its own axis and range of values, so you’ll need to consult the documentation for each font to determine what options you have.