font-variation-settings provides low-level control over variable-font axes. Each axis uses a four-character tag and a numeric value, while higher-level properties are usually simpler for common adjustments. section 12.5.2
Adjusting Open Sans weight
After declaring Open Sans as a variable font from weight 300 through 800, these declarations produce equivalent weight settings: font-weight: 400 and font-variation-settings: 'wght' 400. The axis value can use precise intermediate weights such as 650 or 467. section 12.5.2
Registered axes map to familiar font properties:
- 'wght' controls weight from 0 to 999. section 12.5.2
- 'ital' uses 0 for normal and 1 for italic. section 12.5.2
- 'slnt' controls slant angle; unlike italics, it changes letterform angle without replacing the letterforms. 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 @font-face declaration that exposes Open Sans across its supported variable-weight range. section 12.5.2
