@zoltandulac
@zoltandulac
Zoltan HawrylukMy first post @font-face in Depth got a huge amount of unexpected attention. Thank you all for your comments and criticism. Since the post, there have been quite a bit of information I have read about and thought I should share.
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.
10 responses so far
1
Leif Arne Storset
// Oct 13, 2009 at 10:41 am
The Opera SVG problem you mention is actually two separate issues. The one Håkon commented on is triggered by multiple styles and weights. The other is triggered by visiting multiple pages, or backtracking. I should note that this only applies to SVG fonts, as far as I can tell. Hopefully both will be fixed soon!
2
zoltan
// Oct 13, 2009 at 10:56 am
Thank you for the information! It’s great to see Opera being so transparent about how they are fixing this issue. Much appreciated.
4
Brad Kemper
// Oct 15, 2009 at 11:01 am
Don’t all fonts look like ass in Windows when there is no ClearType/anti-aliasing turned on? These don’t looks any worse than other un-aliased fonts to me.
5
zoltan
// Oct 16, 2009 at 4:50 pm
@Brad: Some fonts do look better when ClearType is off than others. For example take a look at the Wikipedia page for the font Consolas. The font looks great when clear-type is on (and even looks descent with gray-scale anti-aliasing), but with no anti-aliasing, it doesn’t look so hot. Other fonts, like Arial, look better, as shown in Deron Sizemore’s article Start Testing Your Designs With and Without ClearType.
A really good font, in my humble opinion, should be hinted correctly so that they look descent using any type of rendering technology. The fonts I chose for Useragentman.com look “all right” without anti-aliasing, but I know other fonts do a better job. It would be good to see how many fonts out there (both free and not) look really good with or without anti-aliasing technologies.
8
Matt Andrews
// Dec 23, 2009 at 8:54 pm
According to Wikipedia, “ClearType was later introduced as an operating system feature in Windows XP, where it was kept turned off by default. In Windows Vista, ClearType is turned on by default”.
That appears to be confirmed by this Microsoft page, which contains a timeline listing WindowsXP as shipping with “ClearType support”, but Vista is listed as shipping with “ClearType on by default”.
9
zoltan
// Dec 25, 2009 at 3:54 pm
Matt: this is true up to a point – according to Microsoft’s ClearType FAQ, “Original Equipment Manufacturers that pre-install Windows have the option of setting the ClearType default to on or off”. So it looks like it’s more complicated than “turned off by default in XP”.
I had a hard time understanding why Microsoft just didn’t turn it on by default, but after reading the comments on the IEBlog’s ClearType in Internet Explorer 7, I can see that this is quite the emotional issue.
10
Mr Fussyfont
// Oct 13, 2010 at 9:14 am
IIRC, when IE7 came out it gave users the option of turning ClearType on system-wide (during installation or first run), not just in IE. I was also under the impression that possibly with SP3 it was turned on by default, but maybe not.
Regardless, in FF on WinXP, some fonts look so bad without anti-aliasing that I use a modified version of your TypeHelpers script to determine if CT is on, and if it isn’t, use different fonts. My version tests at a lower font size because FF or WinXP will use antialiasing for bold and large sizes when CT is off (whereas IE7+ uses CT regardless of the system setting). See http://www.interprisesoftware.com and interprise.js.
Give Feedback
Don't be shy! Give feedback and join the discussion.
Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.