CSS font-variant-alternates Property

The font-variant-alternates property controls the selection of alternate glyphs.

These alternate glyphs may be referenced by the alternative names defined in @font-feature-values.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.fontVariantAlternates = "normal";

Syntax

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      @font-feature-values "Leitura Display Swashes" {
      @swash { fancy: 1 }
      }
      p {
      font-size: 2rem;
      }
      .variant {
      font-family: Leitura Display Swashes;
      font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-alternates property example</h2>
    <p>Only Firefox supports this property.</p>
    <p class="variant">Only Firefox supports this property.</p>
  </body>
</html>

Values

Value Description
normal None of the features are enabled.
historical forms Enables display of historical forms.
stylistic() Enables display of stylistic alternates.
styleset() Enables display with stylistic sets.
character-variant() Enables specific stylistic alternatives for characters.
swash() Enables swash glyphs.
ornaments() Enables display of ornaments.
annotation() Enables alternate annotation forms.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

x x 34.0+ 9.1+ x




Related articles