1. css
  2. /properties
  3. /font-variation-settings

font-variation-settings

Definition

The font-variation-settings property allows you to specify custom variations for variable fonts. This property lets you adjust various aspects of a variable font, such as its weight, width, or slant, by setting specific variation values.

Examples

This example sets the font-variation-settings property to adjust the weight and width of a variable font:

p {
  font-variation-settings: "wght" 700, "wdth" 110;
}

This example sets the font-variation-settings property to adjust the slant and optical size of a variable font:

h1 {
  font-variation-settings: "slnt" -10, "opsz" 20;
}

This example sets the font-variation-settings property to adjust the x-height and italic angle of a variable font:

blockquote {
  font-variation-settings: "xhgt" 0.8, "ital" 15;
}

Values

ValueDescription
normalDisplays the default variant of the font
<custom-variation-settings>Sets custom variation values for a variable font

Best Practices

  • Use variable fonts and the font-variation-settings property judiciously, as they can have a significant impact on page loading times and performance.
  • Consider using a fallback font stack for browsers that do not support variable fonts, or use feature detection to provide a fallback font only when necessary.
  • Be mindful of legibility when adjusting font variations. Some variations may make text more difficult to read, especially at small font sizes.
  • Test your font-variation-settings styles on different devices and screen sizes to ensure that they are legible and effective.
  • Use custom variation values sparingly, and only when they are necessary to achieve a specific design goal.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes