User Guide Cancel

Using OpenType features

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. Using web fonts in Muse
    9. Packaging font files
    10. Troubleshooting guide: Adding fonts
    11. Added fonts aren't showing to font menu
    12. "Unable to add one or more fonts" or "A font with the same name is already installed"
    13. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

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.

Include OpenType features in your project

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. 

image

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.

-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. 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-variant regardless 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

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

Get help faster and easier

New user?