A variable font puts a range of designs in one font file instead of requiring a separate file for each weight. When a page needs light, regular, and bold text from the same typeface, this can reduce the amount the browser downloads. section 12.5.2 section 12.3
The file defines variation axes: allowable changes to an aspect of the font. A weight axis runs from lighter to bolder designs; an italic axis can instead offer a normal-or-italic choice. In CSS, the useful weight range must also be declared in the font’s @font-face rule. section 12.5.2
Listing 12.11 @font-face rule for a variable font
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800; #1
font-display: swap;
src: url(./open-sans.woff2) format("woff2");
}
Inspect the Open Sans @font-face rule: font-weight: 300 800 declares the range available from one WOFF2 file. section 12.5.2
Choose a weight within the range
After declaring Open Sans with a 300–800 range, set font-family: "Open Sans", sans-serif and font-weight: 467 on an element. The weight need not be a multiple of 100, but it must fall within both the file’s supported range and the @font-face declaration. For ordinary weight selection, font-weight is simpler than addressing the lower-level 'wght' variation axis directly. section 12.5.2
