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.

/* 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;

This comparison shows how font-variation-settings works in a real project. View snippet →

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+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC