font-variation-settings
font-variation-settings sets the values of the axes of a variable font, such as weight, slant, or axes unique to the font, by their four-letter names. Use it to reach axes unique to a font that properties such as font-weight cannot move.
Syntax
normal | [ <opentype-tag> <number> ]#Preview
Code
.box {
font-variation-settings: "CASL" 1, "slnt" -15;
}Controls
About
Writing the value
normal: the initial value. This property changes nothing, and the axes follow properties such as font-weight or the font's defaults.- Write a four-letter axis name in quotes and a number, separated by a space, as in
"wght" 650. Names are case-sensitive. The number can be fractional or negative. - List as many as you like, separated by commas. If the same axis appears twice, the later one wins.
Lowercase axes mean the same thing in every font (wght weight, wdth width, slnt slant, ital italic, opsz glyphs fitted to the text size), and uppercase axes are defined by each font. Axes the font does not have are ignored, and values outside the font's range are clamped to the nearest end of it.
The preview sets only the sample letters (Aag) in Recursive, a variable font with many axes, loaded from Google Fonts. font-variation-settings is inherited, so the value written on the box reaches the sample letters. Besides wght (300 to 1000) and slnt (-15 to 0), Recursive has CASL for a casual look, MONO for monospace, and CRSV for cursive forms (each 0 to 1).
When to use it
Use it to change axes unique to a variable font, such as roundness, stroke contrast, or whether the letters are monospaced. Since the values are numbers, @keyframes and transitions can also animate the axes smoothly.
Watch out
- For weight, width, slant, italic, and glyphs fitted to the text size, prefer font-weight, font-stretch, font-style, and font-optical-sizing. font-variation-settings is inherited as one whole list, so writing a single axis on a child drops the other axes set on the parent. And once
"wght"is set here, changing font-weight (such as the bold of strong) no longer changes the weight. slntcounts counterclockwise as positive, the opposite of CSS angles."slnt" -15matches font-style: oblique 15deg.- Axis names and ranges differ from font to font. Check the font's documentation (such as its Google Fonts page) for which axes it has and their ranges before writing them.
- It works from Chrome 62, Edge 17, Firefox 62, and Safari 11.