RE: JavaScript & Fonts

From: Marc Durdin (
Date: Wed Nov 04 2009 - 14:41:50 CST

  • Next message: Ed Trager: "Re: JavaScript & Fonts"

    (Reposting a little late after email glitches stopped the original message getting through...)

    This is a bit of a side track, but our experience of font embedding (which we use, for real, in quite a number of websites, such as is that it is definitely non-trivial to get it working correctly.

    There are two technologies that are widely available in browsers - Embedded OpenType (EOT) supported by Internet Explorer 4(!) and later, and straight TrueType/OpenType (TTF/OTF) embedding, supported by recent versions of Firefox, Safari and Opera, per the CSS 3 spec.

    EOT fonts are usually generated from TTF/OTF fonts using a Microsoft tool called WEFT. WEFT is a painful tool to use and imposes artificial restrictions on the delivery of the fonts, such as restricting them to particular domains -- there is no option to un-restrict this such as would be desirable for free or open source fonts. It has two significant advantages: it compresses the fonts using AGFA MicroType Express, often reducing the file size to 25% of the original size; and, it does allow you to subset the font -- avoiding the 'Code2000 download for a single script' issue (although subsetting is not without its own problems). It is possible to generate EOT fonts using a simple open source tool ( but we have had trouble with some fonts using this tool - and it does not support compression of the fonts.

    Embedding TTF/OTF fonts using CSS 3 font embedding is rather simpler. Just refer to the font object in your CSS and you are done. No compression or subsetting, so choosing your fonts wisely: 20mb font downloads tend to make site visitors grumpy.

    It is possible to transparently combine the two technologies in a single CSS file and we do that on some sites, but it is definitely cleaner to use Internet Explorer's conditional comments ( to provide EOT to IE and TTF/OTF to other browsers.

    The biggest limitation of embedded fonts is that they cannot resolve shaping engine limitations -- that is, rendering complex scripts correctly when the browser/operating system font renderer does not support them. Graphite fonts make this possible but there are no widely used browsers that support Graphite.

    Regarding non-triviality: most of the trouble we have is during testing. It is difficult to ensure that a font is working correctly as browser caches, system font caches, installed fonts and complex CSS rules all conspire to trick us and make us think that the embedded font is happily in use when in fact it is stuck sulking on the server. We ended up with several virtual machines with different IE browser versions and various other browsers so we could roll back to a known clean state for each test. However, once you get it working, it all seems stable.


    -----Original Message-----
    From: [] On Behalf Of Jukka K. Korpela
    Sent: Monday, 2 November 2009 7:01 PM
    Subject: Re: JavaScript & Fonts

    However, WEFT hasn’t got much popularity (you can hardly find pages that
    really use it, as opposite to trivial pages created just to demonstrate, in
    a simple setting, that WEFT “works”). One reason to this is the common
    experience that when you try to use it for real, you run into
    difficulties—odd problems and limitations. Another reason is that it is a
    Microsoft-only technology, which hasn’t been developed much in the recent

    The font embedding techniques as defined in CSS 3 drafts sound more
    promising. They are supported by newest versions of Firefox and Opera, and
    using suitable utilities you can convert a font to the format required by
    WEFT and thereby cover IE as well. For an introduction, check e.g. . However, this is not
    something I would do in a case like this.

    This archive was generated by hypermail 2.1.5 : Wed Nov 04 2009 - 14:52:38 CST