CSS @font-feature-values Rule

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

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

  • @annotation
  • @ornaments
  • @stylistic
  • @styleset
  • @character-variant
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

<!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

x x 34.0+ 9.1+ x




Related articles