CSS @font-feature-values Rule

The @font-feature-values at-rule sets a named value for certain font feature 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-alternate.

Initial Value	swash
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.fontFeatureValues = "swash";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

@font-feature-values: @swash | @annotation | @ornaments | @stylistic | @styleset | @character-variant;

Example of the @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 property 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

Value	Description
@swash	Specifies a feature name that works with the swash() functional notation of font-variant-alternates. Only one value is allowed.
@annotation	Specifies a feature name that works with the annotation() functional notation of font-variant-alternates. Only one value is allowed.
@ornaments	Specifies a feature name that works with the ornaments() functional notation of font-variant-alternates. One value is allowed.
@stylistic	Specifies a feature name that works with the stylistic() functional notation of font-variant-alternates. Only one value is allowed.
@styleset	Specifies a feature name that works with the styleset() functional notation of font-variant-alternates. Number of values are unlimited.
@character-variant	Specifies a feature name that works with the character-variant() functional notation of font-variant-alternates. One or two values are allowed.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.