Web/CSS/@font-feature-values

The @font-feature-values CSS at-rule lets you use a common name in the font-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

Feature value blocks

@swash

Specifies a feature name that will work with the swash() functional notation of font-variant-alternates. A swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.

@annotation

Specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. An annotation feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.

@ornaments

Specifies a feature name that will work with the ornaments() functional notation of font-variant-alternates. An ornaments feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.

@stylistic

Specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. A stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.

@styleset

Specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. A stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12, and ss01. Note that values higher than 99 are valid, but don't map to any OpenType values and are ignored.

@character-variant

Specifies a feature name that will work with the character-variant() functional notation of font-variant-alternates. A character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.

Formal 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>+;

Examples

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

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

Specifications

Specification	Status	Comment
CSS Fonts Module Level 4The definition of '@font-feature-values' in that specification.	Working Draft	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
@font-feature-values	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@annotation	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@character-variant	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@historical-forms	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@ornaments	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@styleset	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@stylistic	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No
@swash	Chrome No support No	Edge No support No	Firefox Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 9.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 34 Full support 34 Full support 24 Disabled' Disabled' From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS Full support 9.3	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• The font-variant-alternates property that uses values that this at-rule defines.

@font-feature-values by Mozilla Contributors is licensed under CC-BY-SA 2.5.