font-variant-alternates
Definition
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
Examples
Enable alternate glyph selection for the p element using the historical-forms feature:
p {
font-variant-alternates: historical-forms;
}
Enable alternate glyph selection for the h1 element using the swash feature:
h1 {
font-variant-alternates: swash;
}
Enable alternate glyph selection for the blockquote element using the ornaments feature:
blockquote {
font-variant-alternates: ornaments;
}
Values
| Value | Description |
|---|---|
normal | pecifies the default glyph selection for the font |
alternate | Enables alternate glyph selection for the font |
<feature-value> | Enables a specific feature for alternate glyph selection, such as historical-forms, swash, ornaments, stylistic, or annotation |
initial | Sets the property to its default value |
inherit | Inherits the property from its parent element |
Best Practices
- Use font-variant-alternates to add visual interest and personality to your typography, but be mindful of its effect on legibility and readability.
- Choose feature values that complement the overall design and message of your content, rather than using them purely for decorative purposes.
- Be aware that not all fonts support alternate glyph selection or specific feature values, so test your font choices and settings on different devices and browsers to ensure consistent rendering.
- Consider using fallback fonts and feature values for greater compatibility and consistency across different devices and platforms.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |