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 get Typekit fonts’ OpenType features working properly in your project, you first need to find out if your font contains OpenType features (some fonts don’t have any). Then you need to enable OpenType features in your kit, make sure browsers support the features you’re using, and style your text with OpenType features using CSS (see our CSS syntax guide for code you can copy & paste). Let’s go over all of this, step by step.

Find out if a font contains OpenType features

If a font contains common OpenType features, the relevant four-character feature tags will be listed in the “OpenType features” tooltip, which appears in the kit editor’s Character Set menu:

OpenType features tooltop in the kit editor

The list includes 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 listed in the kit.

Enable OpenType features in your kit

Typekit’s “Default” character set does not include OpenType features. To ensure that a font’s OpenType features are included when the kit is published, check the box in the kit editor:

Checkbox to enable OpenType features in the kit

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 Mac 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.

Everything we understand about browser support for OpenType features in CSS is compiled at stateofwebtype.com.

-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";

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. We don’t even cover font-variant in our browser support data yet. Still, it’s a good idea to get used to the syntax.

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp";
}

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-variantregardless of source order. But be careful — it also overrides itself:

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp"; /* disables onum from body declaration */
}

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:

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "onum", "smcp";
}

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:

font-feature-settings: "swsh" 2;

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:

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

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

.class {
  font-feature-settings: "liga", "onum";
}

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

  • Check for the latest browser support data for OpenType features
  • If you’re ready to start styling with CSS, bookmark our syntax glossary of frequently-used OpenType features

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy