Firefox 3: Fonts and text

[This post is largely written by Stuart Parmenter, with some light editing by me. Posted here because Stuart’s away.]

When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser.

Text is an incredibly important part of the Web. While graphics, audio, and video are increasingly common, we still spend the majority of our time on the Web just reading stuff. All the words you read in a web browser are rendered using a font which contains a set of glyphs used to form individual letters. For more simple written languages there may be a straightforward one-to-one mapping of characters to glyphs, but for more complex languages, one glyph may represent multiple characters.

Fonts can also contain additional features that let applications know how render the text in more advanced ways.



Image source: Wikimedia Commons

Firefox 3 has improved support for font kerning, a fairly common font feature used to create visually equal spaces between letters. These fine spacing adjustments help the eye move more smoothly along a line of text. While these adjustments are usually quite subtle, they result in text that is much easier to read, which is why books and printed media make use of kerning most of the time. Not all fonts include kerning information, however, so Firefox can only kern those fonts that support it.



Font ligatures are now fully supported in Firefox 3. In written languages a ligature occurs where two or more letter-forms are joined as a single glyph. Ligatures usually replace consecutive characters that share common components, but aren’t widely used in English and other Latin language fonts. One English font that does make heavy use of ligatures is Zapfino, which has multiple sets of ligatures, some “required” and other “discretionary” that can be optionally applied.


Zapfino font ligature demo in a Firefox 3 textbox. Turns out Firefox doesn’t know how to spell Zapfino.

Ligatures in international text

While ligatures aren’t used that often in English, they are used very frequently in languages such as Arabic and Hindi (among countless others). Ligatures are required to render these languages properly.

Below is an example of a line of Arabic (which is read right to left) being written without ligatures (top) and with ligatures (bottom). The top version is actually unreadable, as it cannot be rendered correctly without ligatures.


Partial ligatures


Image source: Robert O’Callahan

Another feature of the new text system is the ability to lay out a string of content and then render any substring using the whole-string layout. This is important because the user should be able to select any substring, and Firefox needs to draw that substring using the current selection colors. Ligatures complicate this, but Robert O’Callahan has devised a system that makes this work in Firefox 3.



Image source: Wikimedia Commons

Firefox 3 also has improved support for font hinting, another feature that complicates font rendering. Fonts can contain and run small sets of mathematical instructions to tune glyph shapes at different sizes. This is often seen at small sizes where it is used to increase readability, but it means you can’t uniformly scale a font as the font size changes. This is why web page layout can change if you’re zooming in or out.

Font smoothing, anti-aliasing

There are a number of ways to anti-alias text and all three major platforms (Windows, OS X, and Linux) do it differently. Joel on Software covers the differences nicely, so I won’t go into a lot of detail here. Suffice it to say that Firefox 3 continues to obey system settings on all platforms, so text in your browser will look like text in the other applications on your system.

Font types

There are a number of different types of fonts, the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap. The focus generally seems to be on OpenType these days, which supports all sorts of complicated features, but the others are still commonplace on many systems. Firefox 3 is now able to render all these different types of fonts properly, where most other browsers, including Firefox 2, cannot.

Font selection


Firefox 3 tries as hard as it can to render readable text no matter what fonts are requested. Pages often don’t specify a font at all, but if your computer contains a font that can render the text or glyphs in question, Firefox 3 will find that font and use it when rendering the web page. This means that Firefox 3 can successfully render text where other browsers fail.

What’s next?

While font support and text rendering in Firefox 3 have been improved a great deal, this isn’t the end of the story. Mozilla developers are already looking at supporting even more font and text features that could appear in future versions of Firefox, including better font family merging, font-stretch, text shadows, and downloadable fonts. For now, Firefox 3 represents a huge step forward in font support and text rendering. The new graphics layer has made it possible for Firefox 3 to support more languages (and therefore more localizations) than ever before.

digg_url = ‘’;


31 thoughts on “Firefox 3: Fonts and text

  1. Just curious, I’m running Firefox 3 RC2 on Windows XP SP3 but I don’t see any ligatures. I’ve checked the typeface in Charmap and can identify the ligatures, they just don’t appear on screen. Tried Georgia, Verdana, Zapfino. From what I’ve read Ligature support dropped in FF3 RC1 or earlier. Is there Moz specific CSS code to enable/disable this feature?

  2. WebKit does not do this by the way. Enter “ffffff” into a text box in both WebKit and Firefox and increase the font size a lot to see how Firefox renders the string in pairs of ‘f’s. Also, not programming.

  3. ß is not a ligature of f and s, it is a ligature of s and z. It was introduced in German blackletter typography. Also, Arabic letters change shape depending upon their position in a word. This is not the same as a ligature and in fact contradicts your earlier statement. A ligature is when a letter changes shape when it is in combination with other specific letters. Ligatures do exist in Arabic, such as lam-alif.

  4. @Dave G:

    That’s not an f, that’s a ſ (long s). But yes, ß is properly a ligature of ſ and z, not ſ and s. No one uses the long s anymore, so it’s always confusing when Thomas Jefferson wrote about “life, liberty and the purſoot of happineſs.”

  5. @Brent:

    Neither Georgia or Verdana have the necessary ligature information in the font (in a GSUB table on Windows, a mort/morx table on OS X). Zapfino probably only has ligature information for OS X. I see the glyph you’re talking about but we need to access this via OpenType information. Sadly, this is the case for a lot of fonts under XP. The situation is better under Vista, fonts like Calibri, Candara, Constantia, Corbel all have ligature information.

    I set up a test page that renders text samples with and without ligatures for all the fonts on your system. It uses a privileged API to access the list of fonts on the system so you’ll need to download this and run it locally.

    If you’re especially curious you can dig through font info manually with a tool like ttx, a Python tool that allow you to dump TrueType/OpenType fonts into XML. For example:

    ttx -t GSUB calibri.ttf

    This will dump out the contents of the GSUB table to an XML file and you can browse the contents to figure out what ligatures are available.

    @web design company:

    The Webkit folks disable kerning/ligatures for performance reasons:

  6. This is all really nice, I have to admit, but the single text feature firefox needs most for my purposes is text-overflow: ellipsis. I have web apps where there are numeric columns in a fixed layout grid containing currencies and areas. You can imagine if numbers get cut off right between two digits how this becomes a usability issue.

  7. Hi, I’d like you to comment on the support for the OpenType locale feature. This is very important for the Macedonian language for ex. since there’s a different rendering of the serif italic letters in the russian and macedonian cyrillic. The DejaVu fonts have a MKD locale with the corect glyphs, and all Pango applications use those glyphs in a MKD locale. But Firefox3 doesn’t do this.

  8. >>>There are a number of different types of fonts,
    >>>the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap.

    OpenType is a superset of TrueType, so these are basically the same thing.
    PostScript is not a font format at all. Type1 is.
    Bitmap is also not a font format, but a way to build fonts – in comparison to “outline fonts” such as TrueType/OpenType and Type1.

  9. Are there any plans for dynamic fonts? I am pretty tired of seeing the same five fonts for the last decade. There are so many public domain fonts now, and a 40K font download is nothing with broadband today.

    Safari now supports the @font-face rule for TrueType. Hopefully Firefox isn’t far behind? A more beautiful web awaits!

  10. Just two clarifications:

    For font types, “Type 1” and “PostScript” are synonyms. More specifically, PostScript refers to a whole pile of different font types, but when people talk about “PostScript fonts” they almost always mean “Type 1 fonts.”

    “While ligatures aren’t used that often in English….”

    Urm, maybe not by you, but serious publishing/graphics applications use ligatures all the time.

    The basic fi and fl ligatures have been present in almost every font Adobe has made since Adobe first did fonts in the mid-80s. They are part of the basic MacRoman character set. Their automatic usage has been supported by applications going back to QuarkXpress 3 and InDesign 1. Today they’re present in >95% of OpenType fonts, and work automatically in applications including InDesign, Illustrator, Photoshop, QuarkXPress, Pages, Keynote, TextEdit….



  11. Imho one of the most useful extensions in the web-font business would be a “public download” mechanism. That would free us from speculating if a font is installed on my visitors browser or if not (for what we must use sIPHR currently).
    But I am pretty sure, that this will lead to copyright problems…

  12. I do agree with the earlier statement that ligatures is not possible in arabic unless u can find the position of letter in a word and offcourse the context of the word changes sometimes even with ligatures. But anyhow we really appreciate you guyz for your hard work to bring the best out of to the users.. keep rocking…

  13. I second Joeri’s request for “text-overflow: ellipsis” support.

    Additionally “word-wrap: break-word” would be great for when I have little control over the content being displayed, making the soft hyphen and the wbr tag hard to use. Rendering such content in a container with “word-wrap: break-word” can really stop a layout from falling apart. This matters 10 times more when rendering on mobile phones with 240×320 screens 🙂

    So please? These are really more important than text shadows, however pretty they may look.

  14. The font handling is beautiful…except I’m having a problem with Japanese fonts on a particular page that nobody else seems to have. In Firefox 2, the Japanese fonts render beautifully, whereas in Firefox 3, it changes to an ugly, nearly unreadable block font. Has anyoen seen this? I’m going to try FF3 again, and if the font problem continues, I will open up a support request on the Mozilla forums.

  15. I have noticed that kerning for Helvetica (including Swis721) seems to have problems still in Firefox 3 for Windows. I am assuming this is because of ClearType, right?

  16. Since I think I installed FF3, I’ve noticed that lots of characters now are being drawn as well, dominoes. I apologize since this is offtopic, but do you know what’s causing that?

  17. Recently, I encountered a problem with Firefox 3 font selection behavior. I found that firefox 3 cannot automatically fallback to the correct fonts to show some characters in the unicode private use area. However, if I specified the correct font in options/preferences, these characters can be showed correctly.

    If you want to test, go to this page:

    On my fx3, it looks like this:

    If I use chinese font “AR PL New Sung” to display, it looks like this:

    You can get AR PL New Sung here:

    This font selection problem seems to exist only on Windows. It works reliably on Debian.

  18. Firefox 3’s new features indeed are breath-taking.I surely would upgrade from version 2 if it wasn’t for the incompatibility with the Babylon dictionary software (babylon scanning for words is simply inaccurate and is impossible to use it with Firefox).Would people please report this “bug” to the Mozilla developers because I’m doing that already.Thanks.

  19. I have waited a long time to see these features and they were discussed in the font industry almost a decade ago. Firefox has taken four years to display ligatures and speech marks in the same typeface as the rest of the text—but I am glad it has finally made amends and, in fact, headed even further out in front with kerning and discretionary ligature support. I have found it, so far, to be inconsistent but at least it is occasionally working—so I take my hat off to the developers for caring about typography for a change.

  20. HiI'm working with Urdu language and now using an Urdu font, known as Alvi Nastaliq,…which is perfect in Internet Explorer, but not in FireFox 3.01, I mean there are some minor issues like placement of words disturbs in FF, like if you apply font to this Urdu text:میرا نام فرخ ہے اور میرا تعلق پاکستان سے ہےthen some words might be placed below or mixed, but this is not the case in IE.If you have Alvi Nastaliq, then you can see this forum which is purely in Urdu, but you can see the misplacement of words in FF but not in IE

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s