Unlocking OpenType features with CSS

Warning This article was written over six months ago, and may contain outdated information.

It’s great that we now have a huge range of fonts to choose from, thanks to the widespread implementation of @font-face, but typography on the web is still behind other media. Many OpenType fonts come with a range of alternate characters which can be accessed using various software packages, but aren’t available to web browsers. Or rather, they weren’t. There’s a new CSS property which unlocks these special characters, and that’s what I’m going to explain in this post.

A quick note: I’m going to make a presumption that you understand basic typographic terms; if not, I recommend this simple glossary. If you find that I’m perhaps not using the correct terminology throughout this post, I apologise; I’m not a typographer, I just play one on television.

The CSS property in question is font-feature-settings, and it accepts as a value a four-character feature tag, plus a flag — like this:

E { font-feature-settings: "kern" 1; }

The feature tag is a shorthand code for an OpenType feature — in this example, Kerning. The flag value 1 means ‘enable’, so this rule means “turn OpenType kerning on”. Instead of the number 1 you can use on or, as it’s a Boolean attribute, leave the value out entirely; that means that all of these rules are analogous (the dlig tag represents Discretionary Ligatures):

E { font-feature-settings: "dlig"; }
E { font-feature-settings: "dlig" 1; }
E { font-feature-settings: "dlig" on; }

You can disable a feature by using 0 or off; in this example, Swashes will be disabled:

E { font-feature-settings: "swsh" 0; }
E { font-feature-settings: "swsh" off; }

To combine a series of feature flags, comma separate each one; the next code example means “disable Small Caps, enable Stylistic Set 02”:

E { font-feature-settings: "smcp" 0, "ss02"; }

The font-feature-settings property is supported without prefix in IE10, with a -webkit- prefix in Chrome 16+ (not on OSX), and with the -moz- prefix in Firefox 15+. I’ve put together an example page to highlight some of the changes, which you can view with any of the browsers I’ve just mentioned:

Demo: Unlock OpenType features with font-feature-settings

For some clear examples, look at the difference in the first two letters of ‘the’ when Discretionary Ligatures are enabled, or the many different forms of the uppercase letters when using Stylistic Set 02. Note that this demo uses Scriptina Pro; other fonts will have different alternates (or possibly none at all).

An older version of the syntax is implemented in Firefox versions 4 to 14; it’s very similar, but the flag is inside the string with the feature tag:

E { -moz-font-feature-settings: "kern=1"; }

Unfortunately there’s no graceful fallback from the new syntax to the old, and as Firefox now has a fast upgrade schedule I’ve elected to leave the old syntax out of my demo. Thanks to a comment from John Daggett I see there is a graceful fallback, which is to include the flag after the string:

E {
  -moz-font-feature-settings: "kern=1";
  -moz-font-feature-settings: "kern" 1;
}

Older versions of Ffx won’t parse the second rule so will fall back to the first. I’ve updated the demo to allow for that. Thanks, John.

3 comments on
“Unlocking OpenType features with CSS”

  1. Fallback for older versions of Firefox is relatively simple since anything more than a single string won’t parse:

    p {
    ‑moz-font-feature-settings: “dlig=1”; /* up to Firefox 14 */
    ‑moz-font-feature-settings: “dlig” 1; /* Firefox 15 and beyond */
    }

    The second line won’t parse in older versions of Firefox, so the first line is used. The latest version will always use the second line.

    John Daggett [July 11th, 2012, 07:39]

  2. Hi,

    I have seen some demos (lost links, unfortunately) but haven’t seen the font-feature swash working. Is it possible for you to post a screenshot of the demo page?

  3. Sure, Ramanan; here’s a screenshot: note the characters a, n & t.