Firefox 4: OpenType font feature support

When @font-face support was introduced in Firefox 3.5, web authors were suddenly given a way of dramatically enhancing the typography used on their sites.  With all major browsers slated to soon support WOFF fonts offered by many font vendors, the range of fonts available on the web is far wider than it was just two years ago.




The OpenType format has long provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag but they have typically only been available to those using professional publishing applications such as Adobe InDesign. When glyphs are selected for a particular sequence of characters and positioned for rendering, these features affect both glyph selection and positioning. Firefox currently renders using a font’s default feature settings; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.

Included among the many new features in Firefox 4 is the next step, support for controlling OpenType font features directly via CSS.  The -moz-font-feature-settings CSS property permits control over kerning, ligatures, alternates, real small caps and stylistic sets to name just a few.

The CSS3 Fonts specification contains a number of new subproperties of font-variant.  These will eventually provide much better author control over font features but for Firefox 4 only the low-level -moz-font-feature-settings CSS property is supported.  With this authors can enable and disable OpenType font features directly:

.altstyles {
  /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  /* dlig = discretionary ligatures, ss01 = stylistic set 1 */
  -moz-font-feature-settings: "dlig=1,ss01=1";
}

For reference, a complete list of registered OpenType features can be found here. The folks at FontFont provide a nice visual guide to OpenType features.

Ligatures and Contextual Alternates

Font designers often include simple ligatures and kerning data in their fonts but some go beyond these and spend a lot of time creating special ligatures and contextual alternate glyphs to enhance a given design. The Bello Pro script font from Underware is a brush-like design that includes many special ligatures (click image to view):

Note the special ligatures for “and” and “by”, the use of all small caps and the use of alternate glyphs to enhance the script connection between the letters in “Smooching”.  Only font styling is used here, all the text can be selected and copied, there are no images used on the example page.

Number styles

Using Minion Pro from Adobe, available via Typekit, the example below illustrates the use of tabular, monospaced number forms to display columns of data in a way that’s easy to read and analyze.  When proportional numbers are used, the width of large figures with the same number of digits will vary. Normally this would require using a different, monospaced font.  But with OpenType fonts that provide number formatting features, authors can use a single font without giving up the readibility of large data sets (click image to view):

Fonts may use either tabular or proportional number forms by default; providing access to these features allows authors to use both proportional figures for inline text and tabular figures for tabular data without the need to switch fonts.

Automatic fractions

Recipes for American dishes often use fractional amounts.  These can easily be rendered using the automatic fraction feature in OpenType (click image to view):

Each of the fractions above is written in simple text form, (e.g. 2 1/2), no special Unicode codepoints are used.  For fonts that support automatic fractions, an OpenType layout engine will automatically generate fractional forms for numbers separated by a slash.  These are typically limited to simple fractions, for more complex math expressions markup languages like MathML should be used instead.

Language sensitivity

Many languages often use a common script and over time differences in usage naturally arise.  Serbian, Macedonian and Bulgarian all use the Cyrillic script but with slightly different glyph forms for some common characters.  OpenType fonts support the ability to specify script-specific and language-specific glyph handling so given the correct lang attribute in the markup of a page, Firefox 4 can now render text in a language-specific way (click image to view):

Arbitrary features

OpenType defines font feature support using an underlying set of primitives. This allows font designers the ability to create their own features, either for a specialized purpose or as a general feature to be included in a future version of the OpenType specification.  Since the syntax of -moz-font-feature-settings allows for the use of arbitrary feature tags, these can be accessed via CSS.

In the example below, font designer Erik van Blokland of LettError uses a custom designed set of feature properties to create an interesting animation effect when hovering over text on the page (click image to view):

HarfBuzz, an OpenType shaping engine

The process of selecting and positioning glyphs used to display text runs has in the past always been done via platform libraries such as Uniscribe on Windows and CoreText on OSX.  To assure more robust and consistent text rendering across platforms, Firefox 4 will use the open source HarfBuzz OpenType shaping engine on all platforms. In the future this will allow us to integrate support for complex Indic and Southeast Asian scripts that have often been ignored or supported inconsistently in the past.

A Note About Typekit Use

All of the Adobe fonts available via the Typekit webfont service provide access to the full range of OpenType features found in the original fonts.  But to access those features you’ll need to explicitly enable “All Characters” under the “Language Support” category in the kit editor dialog before publishing.

Other examples

(Updated from a blog post last year):

Update: the content of the examples is now editable! Edit the text of each example to experiment with the different font features.


48 comments

  1. Robert O’Callahan

    Great stuff!

    For good times, open the examples and run this bookmarklet to make them editable:
    javascript:void(document.body.setAttribute(‘contenteditable’,’true’))

    November 9th, 2010 at 19:19

    1. John Daggett

      Great idea! I made the contents of all the examples editable.

      November 9th, 2010 at 20:29

  2. Brett Zamir

    While probably rarely an issue, encouraging use of automatic fractions could require use of stricter (and less precise) normalization in string comparisons (though people are probably not using the Unicode code points unless the software facilitates it anyways).

    November 9th, 2010 at 20:31

    1. John Daggett

      Hi Brett,

      Automatic fractions do not affect content, they work on the underlying number characters, not on precomposed fraction codepoints in Unicode. What sort of normalization issues were you thinking about?

      November 9th, 2010 at 21:13

      1. Brett Zamir

        My meaning was that this may encourage people to use 1/4 instead of the more specific codepoints for fraction formation (whether precomposed, or a via the fraction slash (U+2044)), it is semantically speaking somewhat less precise. I’m sure it happens anyways and not a big issue, but I just meant it facilitates less precision. Same thing with ligatures, though maybe that should be happening at the font level anyways since it is more stylistic.

        November 10th, 2010 at 07:32

        1. arno

          @Brett Zamir: you’re right: according to unicode, ligature should happen in the font:

          A: The existing ligatures exist basically for compatibility and round-tripping with non-Unicode character sets. Their use is discouraged. No more will be encoded in any circumstances.

          Ligaturing is a behavior encoded in fonts: if a modern font is asked to display “h” followed by “r”, and the font has an “hr” ligature in it, it can display the ligature. Some fonts have no ligatures, some (especially for non-Latin scripts) have hundreds. It does not make sense to assign Unicode code points to all these font-specific possibilities

          http://unicode.org/faq/ligature_digraph.html

          November 10th, 2010 at 07:38

  3. Hans Halper

    Now we need to get all software for user-generated content (forums, wikis, …) to support the lang attribute.

    November 9th, 2010 at 23:46

  4. benoitb

    Please note : It may works on Mac OS X by default, while in the Windows version of Firefox 4, you need to open the URL about:config and set the gfx.font_rendering.harfbuzz.level option to 1.
    That should be added on top of the article, IMHO.

    November 10th, 2010 at 00:00

    1. John Daggett

      In Firefox 4 Beta 7 this will be set to 1 by default on OSX/Windows and on Linux in a later build.

      November 10th, 2010 at 00:56

      1. thinsoldier

        When will Beta 7 be released?

        November 10th, 2010 at 13:11

        1. John Daggett

          It was released today!

          November 10th, 2010 at 13:15

  5. arno

    Is it supposed to work on linux ?
    Except for Language sensitivity, I can’t get any example working in latest firefox nightly.

    November 10th, 2010 at 01:26

    1. John Daggett

      Linux integration is still in progress, we hope to land that in the next few weeks.

      November 10th, 2010 at 04:25

  6. yagraph

    That’s nice, but, sorry…
    why work on advanced features of Opentype, who will not be available in WOFF (so no cross-browser support), while in the same time SVG text is still unable to do basic text-decoration like underline ?

    November 10th, 2010 at 02:25

    1. John Daggett

      WOFF is just a packaging format, the underlying OpenType font features are still available when the font is in WOFF form. You’re right, I’m sure we could do a better job with SVG text elements.

      November 10th, 2010 at 04:29

      1. yagraph

        Ok, look much more interesting now ;). Thanks for the explanation on WOFF fonts features.

        November 10th, 2010 at 06:49

  7. Maaike

    This is great news. However, why is it that most @font-face fonts – including nearly all Typekit fonts – render so badly in Firefox (and other browsers) on PC? And will this problem be solved in FF4? As it is, I find rendering is generally so bad I hardly use any fonts through @font-face, no matter what special features are available.

    November 10th, 2010 at 07:15

    1. John Daggett

      I assume you’re talking about rendering on XP? We’ve tried to make that a little better by using Cleartype on XP for downloadable fonts. The use of DirectWrite on Vista/Win7 will help too. The main problem is that good font rendering on Windows still relies a lot on hinting data included in the fonts.

      November 10th, 2010 at 13:21

      1. Stuart

        Actually, for me the font rendering is absolutely awful on Windows 7 specifically when acceleration is enabled. (I arrived at this blog entry while googling for how to turn acceleration off in hopes that will help)

        November 11th, 2010 at 18:58

  8. Dave Dawson

    I’ve been waiting a long time for this! Thanks for breaking it down. I’m looking forward to putting these to use!

    November 10th, 2010 at 08:06

  9. Sean Kerner

    Why do you pick and choose only certain elements of the CSS3 Fonts specification to support?
    Why not support the specification as a whole?

    November 10th, 2010 at 11:17

    1. John Daggett

      The CSS3 Fonts specification is still under development. Once issues have been ironed out, we will!

      November 10th, 2010 at 13:16

  10. steve

    Wouldn’t it be sensible to use FreeType on Windows too to get high-quality rendering of fonts?

    At the moment the situation is terrible, because there is no single way to render text on Windows.
    There are the different GDI versions with different feature sets, there is ClearType which still keeps changing depending on the Windows version, there is DirectWrite, which has an abhorrent rendering quality and doesn’t work on older Windows versions.

    Why doesn’t Firefox just use FreeType on Windows for all versions of it?
    Well, in the end I would suggest using FreeType on the Mac, too. So that Apple users finally get some decent rendering on their platform too.

    By the way, does Firefox support sub-pixel positioning of glyphs?

    November 12th, 2010 at 06:16

    1. John Daggett

      You’re right, Windows rendering is a big headache for everyone, for web authors, font designers, and browser vendors. Differences across platforms in font rendering boil down to a large degree to differences in the approach taken to hinting, the programatic adjustment of font outlines to improve rasterization at smaller sizes. Apple and FreeType with auto-hinting enabled use an algorithmic approach, automatically tweaking font outlines using internal heuristics. Windows relies much more on manual hinting information added to fonts by font designers. That’s why the Microsoft core webfonts and Microsoft C-fonts look so much better, a lot of time and effort went into adding hinting information to those fonts so that they displayed well on the screen. Web fonts are still in their infancy; font designers are spending a lot of time and effort figuring out how to better tune their fonts for use on screens rather than for use in print.

      Firefox could use FreeType of course but that has some downsides; font vendors would need to tune their fonts differently for Firefox. Rather than using FreeType, the best possible solution to this problem is for Microsoft to add some form of auto-hinting support to DirectWrite and for font tool vendors to come up with better hinting tools. Those two things will go a long way to improving rendering for all browsers.

      November 13th, 2010 at 07:11

      1. steve

        Hi John!

        Although I have no complains quality-wise about the usage of the Microsoft fonts with Auto-Hinting (that’s what I’m using here) it is certainly possible to special-case the Microsoft fonts and let FreeType render them with the Bytecode Instructions enabled.

        I don’t believe that Microsoft will add auto-hinting or that the font tool vendors improve their hinting algorithms in a realistic time frame ( Firefox could use FreeType of course but that has some downsides;
        > font vendors would need to tune their fonts differently for Firefox.
        How would that be a bad thing? All Linux users would be certainly happy if font creators would do at least _some_ testing of their fonts with FreeType.

        By the way, how do you handle the sad state of Linux font configuration in Firefox? (E. g. no professional font usable with Linux, because Fontconfig seems to depend on 100 steps in usWeightClass? So if you have a font family with 7 weights e. g. 300-330-360-390-420-450-500, you’re f*cked, because Fontconfig recognizes only three of them, if you’re lucky.)

        Thanks!

        November 14th, 2010 at 06:16

      2. steve

        The blog engine here just ate my comment … I’ll try again:
        =========================
        Hi John!

        Although I have no complains quality-wise about the usage of the Microsoft fonts with Auto-Hinting (that’s what I’m using here) it is certainly possible to special-case the Microsoft fonts and let FreeType render them with the Bytecode Instructions enabled.

        I don’t believe that Microsoft will add auto-hinting or that the font tool vendors improve their hinting algorithms in a realistic time frame ( less than 10 years). Even if they would do that, it wouldn’t help with all the already exsiting fonts. (MSFT won’t do that … “compatibility” reasons).

        So basically you are left with FreeType or nothing.

        > Firefox could use FreeType of course but that has some downsides;
        > font vendors would need to tune their fonts differently for Firefox.
        How would that be a bad thing? All Linux users would be certainly happy if font creators would do at least _some_ testing of their fonts with FreeType.

        By the way, how do you handle the sad state of Linux font configuration in Firefox? (E. g. no professional font usable with Linux, because Fontconfig seems to depend on 100 steps in usWeightClass? So if you have a font family with 7 weights e. g. 300-330-360-390-420-450-500, you’re f*cked, because Fontconfig recognizes only three of them, if you’re lucky.)

        Thanks!

        November 14th, 2010 at 06:18

  11. xx

    does this bug fix ?
    word-breaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak

    November 15th, 2010 at 19:08

    1. Matt Wilcox

      It’s not a bug. The site author needs to change their CSS style-sheet to allow word-breaks: https://developer.mozilla.org/En/CSS/Word-wrap

      November 16th, 2010 at 08:17

  12. James John Malcolm

    Great article John! I’m very pleased that font feature support is improving.

    I do have a question: how does using -moz-font-feature-settings: “smcp=1”; allow for proper fallback in other browsers & previous versions of Firefox?

    November 16th, 2010 at 14:34

  13. Jason Ng

    Are East Asian font features supported? Since I didn’t see it mentioned in Font Font’s list of features.

    Like for example the Simplified and Traditional feature that might appear in Chinese fonts.

    November 17th, 2010 at 10:55

  14. snafuracer

    What’s the exact name of the font used on that page ? I’m visiting with Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 – and this is the most beautiful piece of web rendering I’ve ever seen (not knowing too much about the fonts and typefaces, obviously)

    November 18th, 2010 at 05:45

    1. zamb

      It’s Adobe’s “Myriad Pro”, if I’m not mistaken (taken from the source of this HTML page. Also check WikiPedia at “http://en.wikipedia.org/wiki/Myriad_(typeface)”).

      December 12th, 2010 at 23:02

      1. Henry

        if the harfbuzz pref is set to 2 then it works for cjk scripts.
        however the html tag might need a lang attribute.

        February 13th, 2011 at 03:25

  15. Knsi

    Hi,
    How about printing with Firefox? When visiting websites built using css3, especially the @font-face tag, firefox usually does well at rendering om screen but keeps substituting the server font with ugly ones when trying to print.
    Is this going to be fixed in firefox4? I’m using firefox 4.0 under Linux but even from windows or osx there is the same issue.
    Is there any workaround for
    This behavior? As an example konqueror does a good job at both printing and displaying web fonts. How come firefox can’t?

    November 25th, 2010 at 11:21

  16. Andrej

    http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/

    Thank you, John. that’s really great.

    Do you have any information on the current state of the SILA project (http://sila.mozdev.org/)? Are there any plans to integrate it in FF in the near future?

    I got to know about SIL Graphite about six years ago and it is really indispensable for linguists and minority language scripts because unlike OpenType it gives much more freedom to font designer as to glyph behaviour. It has a bit different concept of features that are only considered as options, not functions plus options as in OpenType. In Graphite all functions that is basic operations like shifts, reodering, replacement etc. are implemented on the graphite engine layer. A designer can compose them as s/he wish. If s/he wants some composition of them to be optional he forms it as a Graphite feature. In OpenType any functionality is formed as a feature, but in addition it may be optional. The list of features is well known and standardized, but hardly extensible. Features in Graphite are arbitrary and may have any number of values. So Graphite is more flexible and extensible and there are many situations when that is flexibility and extensibility in demand.

    I’m very glad that with your effort CSS is going to have many smart font related properties. It will be very good if we have possibility to use some property (e.g. existing “font-feature-settings”) to specify SIL Graphite features for a font. And the second — possibility to turn on/off Graphite smart font engine. As OpenOffice that currently fully supports SIL Graphite, features included, has shown, some complex smart font behaviour can slow down page rendering, so it is good to be able using it on demand. It could be css property like “smart-font-engine” with the value of string ” on|off[, on|off]*”.

    December 15th, 2010 at 21:31

    1. Alex

      I think the eventual plan is to use Harfbuzz entirely, and not maintain separate shapers. Currently we have Harfbuzz and the system shaper (Uniscribe on Win, Pango on Linux and CoreText on OS X)

      Harfbuzz has a fairly extensible design, and supports “plugging” in external shapers. So if/when a Graphite shaper is written for Harfbuzz, any application using it will gain support for free (and this isn’t just limited to Graphite, somebody could write an AAT backend, or a CoreText one, etc.)

      That being said,this is just what I’ve gathered from reading blog posts and mailing lists. So plans might change/already have been changed.

      December 23rd, 2010 at 02:42

      1. Wurdebalg Hurrst

        Isn’t in some cases the pure GDI shaper used under Windows?

        January 30th, 2011 at 06:20

        1. Alex

          Yeah, I think the Uniscribe shaper can fail in some cases (like CFF OpenType fonts loaded via @font-face on pre Windows 7 machines), so it’ll fallback to GDI “shaping”

          February 4th, 2011 at 06:34

  17. Niznaica

    It is time for mozilla.org to create russian language edition. It is impossible to reed looking every word with dictionary.

    December 15th, 2010 at 23:25

  18. KAMAL.SA88

    با سلام خدمت مدیران موزیلا و تشکر فراوان از همه همکاران در ساخت موزیلا
    خسته نباشید
    با تشکر کمال سنجری پور از ایران
    واقعا موزیلا زیباست و من فقط موزیلا را نصب می کنم موفق باشید
    en :
    Hi managers with plenty of Mozilla and thank all partners in making Mozilla
    Do not be tired
    Mozilla is really nice and I’m just installed Mozilla luck
    Thanks Kamal Pur Sanjari Iran

    December 16th, 2010 at 14:46

  19. KAMAL.SA88

    Do not think that we are Iranian and have no access to anything we have in some silly that all your site so that Hg will not understand our own site in the way Microsoft Windows Vista Hg, and we went to the cache So that even Nfhmydnd themselves. Thank you and your colleagues Mhtrmtan give us that Mozilla have put in all Webmasters are using the Mozilla and are very satisfied to know all the software in Iran are no prices and only software produced by Iranians are prices
    Images Shutter Stuck in the price of 20 dollars bought nearly $ 20 in which country you’re right if you want me to add friends on Yahoo to discuss with
    And finally thank you and thank you all

    December 16th, 2010 at 15:06

  20. Diana

    Where can I post concerns about FF simply not working??!! When I try to ask questions directly on their site, nothing is ever found. And, when I hit their contact link, only a snail-mail address is given–no email.

    I’ve simply quit using Mozilla–You’d think they’d want to know this…?

    December 20th, 2010 at 19:49

  21. Robson Sobral

    Great, but… Sadly, “frac=1” have effects over almost all characters, except letters. Numbers, dashs… Not just fractions.

    Test made on Firefox 4b8.

    January 2nd, 2011 at 17:34

  22. Robson Sobral

    Ooooooooooops! I have to say! This bug just happens inside tables! I’m sorry!

    January 4th, 2011 at 06:26

  23. bryan

    hi, does anyone know why the font ‘spirit medium’ is missing in firefox?

    cheers!

    February 21st, 2012 at 09:45

  24. edwin

    As of 07/01/2012 none of these fonts work, I am using Firefox 14 and nothing, and the best thing yet is I can’t find an answer on line, I am lost and the woods are pretty tall!!

    July 1st, 2012 at 17:05

    1. John Daggett

      @edwin i’ve updated the demos for the new syntax of -moz-font-feature-settings. they should work for all versions FF4+

      July 11th, 2012 at 01:09

      1. edwin

        Awesome John, thank you!
        Apparently what was happening is that in my preferences for FireFox I didn’t check the “Allow website to use their own fonts” this is why my browser wasn’t displaying the fonts correctly, but it’s all done and it’s working great!

        Thanks again man and keep up the great work!

        July 11th, 2012 at 07:38

Comments are closed for this article.