SVG fonts for Opera and Chrome

Jonathan Snook wrote a great article regarding Opera 10 and Google Chrome supporting SVG fonts (Chrome can load them without any pesky command line switch!).  He mentions how to convert TrueType fonts to this format using Batik, and that by removing all the <hkren> elements inside the file’s XML can make the font smaller than the original TrueType file.  Too bad the browsers don’t support this format.

Opera’s buggy implementation

I noticed after I launched my first @font-face article that Opera was not loading the fonts on my blog when users visited more than one page. It turns out that Opera 10′s implementation of @font-face is a little buggy. When you feed it a page with an embedded font, you may not see the embedded fonts properly, like in the screenshot below:

Opera sometimes doesn't load the font at all, and removes other styling (click to enlarge).

According to Opera, this happens when “specifying different weights and styles for a single font-family name”. Håkon Wium Lie, the company’s Chief Technology Officer , has described a work-around until the company can fix the problem properly.

I am debating whether to implement the work around on my site, or to wait for Opera to fix the problem and patch all Opera 10 installations via auto-update (I’m leaning towards the latter).

Performance Issues With Font Embedding

One of the comments on the last article came from Steve Souders who had performance concerns with font-embedding. Paul Irish came back with information showing the when browsers load the fonts, and what they do before the font is loaded.  He also shows how to use JavaScript to make the loading behaviour consistent between browsers.

The performance issues with font-embedding is something I am going to be keeping an eye on, especially when it comes to font-services, which the OpenType site believes will be the future of web font distribution for commercial fonts. Although it doesn’t seem like much of an issue currently (my blog seems to load quickly), I don’t want to do anything that would slow down my web applications – especially if I am using them just to make the text look a little prettier.

Windows XP Rendering Issues

Boing-Boing had a bad experience with font-embedding. Turns out they got a lot of complaints when they decided to incorporate it into their website. The reason: some users didn’t have ClearType turned on, and the font Boing-Boing chose looked “like ass” without ClearType.

Below are screenshots of this site without ClearType on:

Internet Explorer without ClearType

Firefox without ClearType

The article stated that there are quite a few XP computers which apparently don’t have ClearType on by default. I wonder if there are any stats to back that up. If so, then developers embed fonts into pages should test that scenario as well. It does look different.