font-variation-settings
Sets the axes of a variable font directly — weight, width, slant or the font's own custom axes — to any number, not just fixed steps.
Syntax
font-variation-settings: "wght" 650, "wdth" 90;Values
| Parameter | Type | Description |
|---|---|---|
| "axis" number | axis value | A four-letter axis tag in quotes and its value: `"wght"` weight, `"wdth"` width, `"slnt"` slant, `"opsz"` optical size; custom axes use capital letters. |
| normal | keyword | The default: the font's own values. |
Examples
Weight changing smoothly on hover (visible if your system font is variable, as on current Windows and macOS):
<style>
.title {
font-family: system-ui, sans-serif; font-size: 32px;
font-variation-settings: "wght" 300;
transition: font-variation-settings 0.4s;
}
.title:hover { font-variation-settings: "wght" 850; }
</style>
<p class="title">Hover over me</p>Notes
For the standard axes prefer the normal properties: font-weight: 650 instead of "wght", font-stretch instead of "wdth", font-style: oblique 10deg instead of "slnt". They combine correctly with other styles, while font-variation-settings overrides everything and is not inherited per axis. Use it for custom axes. Nothing changes if the font has no such axis.
See also
- font-weight — The weight (boldness) of the font.
- @font-face — Loads a font and gives it a name to use in `font-family`.
- font-family — The font family, with a list of fallbacks.
- transition — Animates the change of a property from the old value to the new one.
Related recipes
In the tutorial
- Web fonts — How to use your own font — the @font-face rule, the woff2 format, font-display, variable fonts, Google Fonts with preconnect, fallback fonts and choosing between self-hosting and a CDN.