How to Activate Stylistic Sets on the Web
We get asked all the time by customers: how do I activate my font’s Stylistic Sets on the web with CSS? Fortunately, it’s dead simple!
Asking for a friend: what are stylistic sets?
Most (if not all) of our typefaces contain OpenType Stylistic Sets (SS), which are features you can activate to access alternate forms and versions of glyphs in a font. We include these alternate characters in our fonts so designers can customise the flavour and feeling they want.
To activate stylistic sets and other features we use the CSS font-feature-settings attribute and specify which features we’d like to activate. The code below not only activates SS01, but old style figures as well:
font-feature-settings: "ss01" 1, "onum" 1;
The 1 indicates that the feature is active.
The 0 would mean not active.
Examples
In our Favorit, you switch the double storey “a” for a single storey one with SS01 (Stylistic Set #1), and you can swap out the “R” with its iconic vertical leg for one which is diagonal and more relaxed with SS03.
Ringtauw
We can access the alternate “G” in Favorit by activating SS02.
font-feature-settings: "ss02" 1;
GREG
Whyte’s single storey “g” and “a” can swapped in with SS01 & SS02 combined.
font-feature-settings: "ss01" 1, "ss02" 1;
Logan
The full schoolbook set of alternate characters in Diatype can be accessed with SS13.
font-feature-settings: "ss13" 1;
Justina
🤫 Quick Font Gauntlet Tip
Using our Font Gauntlet, you can quickly drop your font in, activate your OpenType features, and copy the corresponding CSS code by clicking the "Copy CSS Code" button.
