Using OpenType features

OpenType features are like secret compartments in fonts. Unlock them and you’ll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography.

To use a font's OpenType features in your project, you need to include them in the web project and then style your text with the required CSS. See our syntax guide for examples of each feature with code to can copy & paste into your CSS.

To include a font’s OpenType features in a web project, visit the Web Projects page and click the "edit" link for the project. In the Character Set section, check the OpenType Features box. 

When the box is checked, you'll see a list of the features available for that particular web font family, such as ligatures, alternate characters, or small capitals. 

The list shows OpenType features which are available in all the weights and styles of the family. If a feature is only included in specific weights or styles, it is not included in the list.

Check browser support for the features you’re using

Poor browser support for font-variant and font-feature-settings means that OpenType features may not work properly in all of the contexts that matter to you.

Support is bafflingly nuanced. Newer browser versions that claim support come with caveats, and older browsers that don’t support OpenType features can choke on them. By default, Chrome doesn’t enable features that should be enabled by default (like common ligatures and contextual alternates). Safari on masOS and iOS ignores any specified font-feature-settings values, instead choosing to enable a few features by default — and its default choices cannot be modified. Some versions of Firefox (version 15 and prior) have trouble when multiple stylistic sets are enabled. Applying OpenType features in Chrome 32 and older stops web fonts from working.

Current browser support relies heavily on vendor prefixes. In the Syntax for OpenType features in CSS help doc, you’ll find code full of vendor-prefixed properties that look like the sample above.

Style your text with OpenType features using CSS

CSS syntax for enabling OpenType features is still evolving. What you need to know is that there are both high-level and low-level properties — and inheritance is especially tricky.

The low-level CSS font-feature-settings property is somewhat supported in browsers via vendor prefixes, but it’s cumbersome to use for two reasons. First, it relies on four-character OpenType feature tags that are hard to remember. Second, all feature tags are specified in a single property, which can get hairy. See syntax for specific OpenType features and syntax for using multiple OpenType features.

The high-level CSS font-variant property and its subproperties are great because they employ natural-language values like “small-caps” and “diagonal-fractions”. The W3C wants us to use these whenever possible, but browser support is nonexistent. Still, it’s a good idea to get used to the syntax.

So, we’ll use both font-variant and font-feature-settings, keeping in mind how they are designed to work. We’ll specify the easy-to-read font-variant first in our CSS, like the code above.

Inheritance

Because font-feature-setting is a low-level property intended “for special cases where its use is the only way of accessing a particular infrequently used font feature” it will override font-variant regardless of source order. But be careful — it also overrides itself:

Any inherited font-feature-settings values are overridden when the property is reapplied. In the example above, for elements with a class of class to have both small caps (smcp) and oldstyle figures (onum) enabled, the “onum” value would need to be included again — so we could rewrite the declaration like this:

Indexed font-feature-settings values

Some font-feature-settings values are a little more complex. In the examples so far, each value has been a string (or comma-delimited set of strings). The presence or absence of feature tags like “onum” and “smcp” is like a binary choice — the features are either on or off.

That makes sense. But what if, for example, a font contains two different swash versions of the capital ‘A’ character? In this case, we don’t simply want to enable swashes — we want to enable swashes and choose a particular swash. So we can add a numeric index to the value, after the string:

You might be thinking, what number should I use here? How many different swashes are in a font? And well, it depends on the font. Using a ‘0’ means turning the swash feature off. The same goes for other features that use numeric indices, such as stylistic alternates and stylistic sets.

Using multiple OpenType features

The font-variant property is CSS shorthand for all font-variant subproperties. We can do something like this to enable common ligatures and oldstyle figures:

Similarly, multiple features can be enabled using font-feature-settings with a comma-delimited list of values:

In both of these cases, inherited values are overridden entirely and browser support may vary. Keep in mind that font-variant values have sometimes been designed to enable multiple features at once (see capitals to small caps).

Resources

If you’re ready to start styling with CSS, bookmark our syntax glossary of frequently-used OpenType features