W3docs
en
Log in

CSS @font-feature-values Rule

The @font-feature-values at-rule uses a name for features in the font-variant-alternates property. Read about the property values and see examples.

The @font-feature-values at-rule sets a named value for certain font features of a font family.

It can be used at the top level of CSS or in a CSS conditional-group at-rule.

The @font-feature-values at-rule can contain any of the following feature values:

  • @annotation
  • @ornaments
  • @stylistic
  • @styleset
  • @character-variant

Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for a font. A font can have several glyphs in these alternates each of which has an index. You can create a name for the index with the @font-feature-values at-rule and thus it can be used with font-variant-alternates. Note that this at-rule requires a matching font to be loaded and works exclusively with the font-variant-alternates property.

Syntax

Syntax of CSS @font-feature-values At-rule

@font-feature-values <family-name> {
  @swash { name: index; }
  @annotation { name: index; }
  @ornaments { name: index; }
  @stylistic { name: index; }
  @styleset { name: index; }
  @character-variant { name: index; }
}

Example of the @font-feature-values at-rule:

Example of CSS @font-feature-values At-rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 1.5rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>@Font-feature-values at-rule example</h2>
    <p>
      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.
    </p>
    <p>This property is supported by Firefox and Safari.</p>
    <p class="variant">This property is supported by Firefox and Safari.</p>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
@swashSpecifies a feature name that works with the swash() functional notation of font-variant-alternates.
@annotationSpecifies a feature name that works with the annotation() functional notation of font-variant-alternates.
@ornamentsSpecifies a feature name that works with the ornaments() functional notation of font-variant-alternates.
@stylisticSpecifies a feature name that works with the stylistic() functional notation of font-variant-alternates.
@stylesetSpecifies a feature name that works with the styleset() functional notation of font-variant-alternates.
@character-variantSpecifies a feature name that works with the character-variant() functional notation of font-variant-alternates.

Practice

Practice

Which of the following statements are true according to the CSS property 'font-feature-values'?