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 wide­spread imple­men­ta­tion of @font-face, but typog­ra­phy on the web is still behind oth­er media. Many Open­Type fonts come with a range of alter­nate char­ac­ters which can be accessed using var­i­ous soft­ware pack­ages, but aren’t avail­able to web browsers. Or rather, they weren’t. There’s a new CSS prop­er­ty which unlocks these spe­cial char­ac­ters, and that’s what I’m going to explain in this post.

A quick note: I’m going to make a pre­sump­tion that you under­stand basic typo­graph­ic terms; if not, I rec­om­mend this sim­ple glos­sary. If you find that I’m per­haps not using the cor­rect ter­mi­nol­o­gy through­out this post, I apol­o­gise; I’m not a typog­ra­ph­er, I just play one on television.

The CSS prop­er­ty in ques­tion is font-feature-settings, and it accepts as a val­ue a four-char­ac­ter fea­ture tag, plus a flag — like this:

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

The fea­ture tag is a short­hand code for an Open­Type fea­ture — in this exam­ple, Kern­ing. The flag val­ue 1 means ‘enable’, so this rule means “turn Open­Type kern­ing on”. Instead of the num­ber 1 you can use on or, as it’s a Boolean attribute, leave the val­ue out entire­ly; that means that all of these rules are anal­o­gous (the dlig tag rep­re­sents Dis­cre­tionary Ligatures):

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

You can dis­able a fea­ture by using 0 or off; in this exam­ple, Swash­es will be disabled:

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

To com­bine a series of fea­ture flags, com­ma sep­a­rate each one; the next code exam­ple means “dis­able Small Caps, enable Styl­is­tic Set 02”:

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

The font-feature-settings prop­er­ty is sup­port­ed with­out pre­fix in IE10, with a -webkit- pre­fix in Chrome 16+ (not on OSX), and with the -moz- pre­fix in Fire­fox 15+. I’ve put togeth­er an exam­ple page to high­light some of the changes, which you can view with any of the browsers I’ve just mentioned:

Demo: Unlock Open­Type fea­tures with font-feature-settings

For some clear exam­ples, look at the dif­fer­ence in the first two let­ters of ‘the’ when Dis­cre­tionary Lig­a­tures are enabled, or the many dif­fer­ent forms of the upper­case let­ters when using Styl­is­tic Set 02. Note that this demo uses Scripti­na Pro; oth­er fonts will have dif­fer­ent alter­nates (or pos­si­bly none at all).

An old­er ver­sion of the syn­tax is imple­ment­ed in Fire­fox ver­sions 4 to 14; it’s very sim­i­lar, but the flag is inside the string with the fea­ture tag:

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

Unfor­tu­nate­ly there’s no grace­ful fall­back from the new syn­tax to the old, and as Fire­fox now has a fast upgrade sched­ule I’ve elect­ed to leave the old syn­tax out of my demo. Thanks to a com­ment from John Daggett I see there is a grace­ful fall­back, which is to include the flag after the string:

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

Old­er ver­sions of Ffx won’t parse the sec­ond rule so will fall back to the first. I’ve updat­ed the demo to allow for that. Thanks, John.

3 comments on
“Unlocking OpenType features with CSS”

  1. Fall­back for old­er ver­sions of Fire­fox is rel­a­tive­ly sim­ple since any­thing more than a sin­gle 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 sec­ond line won’t parse in old­er ver­sions of Fire­fox, so the first line is used. The lat­est ver­sion will always use the sec­ond line.

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

  2. Hi,

    I have seen some demos (lost links, unfor­tu­nate­ly) but haven’t seen the font-fea­ture swash work­ing. Is it pos­si­ble for you to post a screen­shot of the demo page?

  3. Sure, Ramanan; here’s a screen­shot: note the char­ac­ters a, n & t.