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";

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>

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.

Browser support

chrome edge firefox safari opera
34.0+ 9.1+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?