@font-feature-values CSS At-Rule

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The @font-feature-values CSS at-rule allows you to define named values for font features, which can then be used in the font-variant-alternates property. This can be useful for simplifying your CSS when working with multiple fonts, as it allows you to use the same named value for a font feature even if it is activated differently in different fonts.

The @font-feature-values at-rule can be used at the top level of your CSS or inside any CSS conditional-group at-rule. It takes two parameters: the name of the font feature and the value(s) for that feature. The value(s) can be either a single identifier or a list of identifiers, separated by spaces.

Syntax

@font-feature-values <family-name># {
  <feature-value-block-list>
}
where 
<family-name> = <string> | <custom-ident>+
<feature-value-block-list> = <feature-value-block>+

where 
<feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'

where 
<feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation
<feature-value-declaration-list> = <feature-value-declaration>

where 
<feature-value-declaration> = <custom-ident>: <integer>+;

Values

@swashSets the name of the function that will work with the function notation swash() for font-variant-alternates. A function value definition swash allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@annotationSets the name of the function that will work with the function notation annotation() for font-variant-alternates. A function value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@ornamentsSets the name of the function that will work with the function notation ornaments() for font-variant-alternates. A function value definition ornaments allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@stylisticSpecifies the name of the function that will work with functional notation stylistic() font-option-alternates. The definition of the value of a stylistic feature allows only one meaning: ident1: 2 is valid, but identif2: 2 4 is not.
@stylesetSpecifies the name of the function that will work with functional notation styleset() font-option-alternates. The stylet function value definition allows an unlimited number of values: identif1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12 and ss01. Note that values above 99 are valid but do not map to any OpenType values and are ignored.
@character-variantSpecifies the name of the function that will work with functional notation character-variant() font-variant-alternates. The characteristic value definition in the symbolic variant allows one or two values: ident1: 3 maps to cv03 = 1, and ident2: 2 4 maps to cv02 = 4, but ident2: 2 4 5 is not allowed.

Example

/* 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);

}