font-variation-settings
A low-level property used for controlling 'variable fonts'. It allows you to fine-tune axes like weight, width, slant, or custom axes with unprecedented precision.
It is documented as part of the CSS Fonts specification.
Syntax
/* Usage Example */
.variable-heading {
/* Fine-tuning weight and width for a variable font */
font-variation-settings: "wght" 650, "wdth" 110;
}
/* Syntax */
font-variation-settings: normal;
/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: revert-layer;
font-variation-settings: unset;
font-variation-settings Browser support
Widely available
Since
2018 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2018.
62+
62+
11+
17+