font-variation-settings | CSS CSS Properties

Controls low-level variable font axes. Lets you fine-tune font weight, width, and other OpenType variations.

Quick example

h1 { font-variation-settings: "wght" 700, "wdth" 85; }

normal | [ <string> <number> ]#

Initial value

normal

Inherited

Yes

h1 {
  font-family: "RobotoFlex", sans-serif;
  font-variation-settings: "wght" 700, "wdth" 75;
  /* weight=700, width=75% */
}

Use variable font axes like weight and width for precise typography control.

.condensed-bold {
  font-variation-settings: "wght" 900, "wdth" 50;
  /* Extra heavy and condensed */
}

Combine multiple axes to create custom typographic combinations.

@media (max-width: 768px) {
  h1 {
    font-variation-settings: "wdth" 85;
    /* Slightly more condensed on mobile */
  }
}

Use variable font axes to adapt typography for different screen sizes.

Widely available Since 2016 89% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2016.

Safe to use without fallbacks.

Requires a variable font

font-variation-settings only works with variable fonts (fonts that support axes). Regular static fonts ignore this property.

Axis names are font-specific

Different variable fonts support different axes. "wght" and "wdth" are common, but custom fonts may have custom axes. Check your font documentation.

Fallback to font-weight still needed

Use font-weight as a fallback for browsers that don't support variable fonts. font-variation-settings won't help older browsers.