CSS @font-feature-values At-Rule

The CSS @font-feature-values at-rule is used to set a named value for certain font feature indices of a given font family.

The @font-feature-values at-rule allows you to provide a named value for the font-variant-alternates property when activating a font-specific feature within a certain font.

A font might have a number of alternate glyphs in addition to the default glyph for a given character. These could include swash glyphs, alternate annotation forms, stylistic alternates, and more. And a font could have multiple glyphs within each of these categories, each of which is assigned an index. For example, a font could have two different swash glyphs, one having a feature index of 1 and the other 2. The @font-feature-values rule allows you to create a name for these feature indices so that you can use it with the font-variant-alternates property.

A @font-feature-values rule is composed of a list of font families followed by a block containing individual feature value blocks that take the form of @-rules.

Like this:

This can then be used later in the CSS to specify which of those variants to use:

In this case we select the second variant (the one we named flowing, which has an index of 2).

Possible Values

The values that the @font-feature-values at-rule can contain are referred to as "feature value blocks". Each of these take the form of an @-rule. Each of these feature value blocks defines a set of named values for a specific font feature when a given set of font families is used. In other words, these feature value blocks define a mapping between a font family, the font feature, a customer identifier, and a numeric index value. The numeric index value is the value defined by the font for the specific feature.

The @font-feature-values at-rule can contain any of the following feature value blocks.

@swash

This block works with the swash() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph. Each custom identifier can contain only one value.

/* Valid code */ @swash { swishy: 1; } /* Valid code */ @swash { swishy: 1; flowing: 2; } /* Invalid code - the custom identifier has two values "1" and "2" */ @swash { swishy: 1 2; }

@annotation

This block works with the annotation() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph. Each custom identifier can contain only one value.

@ornaments

This block works with the ornaments() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph. Each custom identifier can contain only one value.

@stylistic

This block works with the stylistic() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph. Each custom identifier can contain only one value.

@styleset

This block works with the styleset() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph.

Multiple values indicate the style sets to be enabled. Values between 1 and 99 enable OpenType features ss01 through ss99 (although the OpenType standard only officially defines ss01 through ss20).

There's no limit to the number of values you can provide to a custom identifier.

@character-variant

This block works with the character-variant() value of the font-variant-alternates property. You provide a custom identifier with a corresponding value. The value corresponds with the index defined by the font for the desired glyph.

Each custom identifier can contain up to two values. A single value between 1 and 99 indicates the enabling of OpenType feature cv01 through cv99. When two values are listed, the first value indicates the feature used and the second the value passed for that feature.

Official Specifications

The @font-feature-values at-rule is defined in CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013).