CSS @styleset At-Rule
The @styleset at-rule defines names for one or more OpenType stylistic set indexes within @font-feature-values. Named sets are selected using font-variant-alternates.
@styleset Syntax
@font-feature-values "Example Font" {
@styleset {
headline: 1 2;
}
}
.heading {
font-family: "Example Font", serif;
font-variant-alternates: styleset(headline);
}Inside @font-feature-values, @styleset assigns a readable name to one or more OpenType stylistic-set indexes. Authors then use that name with font-variant-alternates.
How @styleset Works
The mapping only changes the appearance when the active font contains the requested stylistic sets. Provide a legible fallback because unsupported fonts can render ordinary glyphs.
The @styleset at-rule defines names for one or more OpenType stylistic set indexes within @font-feature-values. Named sets are selected using font-variant-alternates.
The @styleset rule is a descriptor block nested inside @font-feature-values. It assigns a readable name to one or more OpenType stylistic-set indexes.
Font Requirements
The font must provide the specified OpenType stylistic sets. A CSS declaration does not create alternate glyphs.
Use the name with font-variant-alternates: styleset(name). The selected font must contain the relevant stylistic set for a visible change.
Multiple Indexes
A named styleset can contain more than one positive integer, allowing multiple stylistic sets to be selected together.
Feature Names
The custom name is an identifier, not a string. Its mapping is associated with the font family declared by @font-feature-values.
@styleset Example
Check browser support and test the example in a compatible browser. For font-feature examples, the selected font must contain the requested OpenType feature.
HTML
<h2 class="heading">Sample typography</h2>CSS
@font-feature-values "Example Font" {
@styleset {
headline: 1 2;
}
}
.heading {
font-family: "Example Font", serif;
font-variant-alternates: styleset(headline);
}Note: "Example Font" is a placeholder. Replace it with an actual OpenType font containing the relevant alternate glyphs.
Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.
If the font lacks that feature, the text normally remains readable with its default glyphs. Test with a known OpenType font rather than assuming every font provides stylistic sets.
Specifications
This feature is described in CSS Fonts Module Level 4.