@font-feature-values

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2023⁩.

The@font-feature-valuesCSS at-rule lets you use a common name in thefont-variant-alternates property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.

The@font-feature-values at-rule may be used either at the top level of your CSS or inside any CSS conditional-group at-rule.

Syntax

css

@font-feature-values Font Name {  font-display: swap;  @styleset {    nice-style: 12;  }  @swash {    fancy: 2;  }}

Each@font-feature-values block can contain a list of feature value blocks (listed below), as well as thefont-display descriptor.

Feature value blocks

@swash: Specifies a feature name that will work with theswash() functional notation offont-variant-alternates. A swash feature value definition allows only one value:ident1: 2 is valid, butident2: 2 4 isn't.
@annotation: Specifies a feature name that will work with theannotation() functional notation offont-variant-alternates. An annotation feature value definition allows only one value:ident1: 2 is valid, butident2: 2 4 isn't.
@ornaments: Specifies a feature name that will work with theornaments() functional notation offont-variant-alternates. An ornaments feature value definition allows only one value:ident1: 2 is valid, butident2: 2 4 isn't.
@stylistic: Specifies a feature name that will work with thestylistic() functional notation offont-variant-alternates. A stylistic feature value definition allows only one value:ident1: 2 is valid, butident2: 2 4 isn't.
@styleset: Specifies a feature name that will work with thestyleset() functional notation offont-variant-alternates. A styleset feature value definition allows an unlimited number of values:ident1: 2 4 12 1 maps to the OpenType valuesss02,ss04,ss12, andss01. Note that values higher than99 are valid, but don't map to any OpenType values and are ignored.
@character-variant: Specifies a feature name that will work with thecharacter-variant() functional notation offont-variant-alternates. A character-variant feature value definition allows either one or two values:ident1: 3 maps tocv03=1, andident2: 2 4 maps tocv02=4, butident2: 2 4 5 is invalid.

Formal syntax

@font-feature-values =
  @font-feature-values<family-name># {<declaration-rule-list> }

<family-name> =
<string>|
<custom-ident>+

Examples

Using @styleset in a @font-feature-values rule

css

/* At-rule for "nice-style" in Font One */@font-feature-values Font One {  @styleset {    nice-style: 12;  }}/* At-rule for "nice-style" in Font Two */@font-feature-values Font Two {  @styleset {    nice-style: 4;  }}/* Apply the at-rules with a single declaration */.nice-look {  font-variant-alternates: styleset(nice-style);}