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
Value | Description |
---|---|
normal | Displays 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
Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |