font-variation-settings
The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
Overview
The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 17 | 62 | 11 | 62 | 11 | |
| CSS at-rule | ||||||
| The font-variation-settings CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the @font-face at-rule. The values for this descriptor are the same as the font-variation-settings property, except for the global keyword values. | 140 | 140 | 62 | | 140 | |
- Requires macOS 10.13 High Sierra or later.
- Requires iOS 11 or later.
Syntax
.variable-text {
font-variation-settings:
"wght" 450,
"wdth" 90,
"CASL" 1;
}Live demo
Use cases
Using font-variation-settings
The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features