font-variation-settings
The font-variation-settings CSS property provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.
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 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Requires macOS 10.13 High Sierra or later.
Notes 1 item(s)
Implementation note
- Requires iOS 11 or later.
Syntax
CSS
.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 provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.