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

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