1. css
  2. /properties
  3. /font-variant-alternates

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

ValueDescription
normalpecifies the default glyph selection for the font
alternateEnables 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
initialSets the property to its default value
inheritInherits 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes