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.
Enable alternate glyph selection for the p element using the historical-forms feature:
Enable alternate glyph selection for the h1 element using the swash feature:
Enable alternate glyph selection for the blockquote element using the ornaments feature:
|pecifies the default glyph selection for the font
|Enables alternate glyph selection for the font
|Enables a specific feature for alternate glyph selection, such as historical-forms, swash, ornaments, stylistic, or annotation
|Sets the property to its default value
|Inherits the property from its parent element
- 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.