Well rendered webfont solution

Question

The challenge:

Provide dynamic web fonts that render acceptably across all major browsers, devices and Operating Systems

The story:

So I had used cufon or sifr in the past and had since abandoned both in favor of @font-face. After using @font-face in production for some time, I made a horrifying discovery. Many fonts (most?) look like crap in Windows XP, regardless of browser. Even in google chrome, XP renders the fonts unacceptably jagged and ugly.

I am aware of why this is happening. After reading many excellent posts on ye olde stack overflow, I understand the issue is NOT of font hinting, but of XP having clear-type set to off be default. So ALL fonts are jagged in XP by default regardless of application.

So... if @font-face works great everywhere BUT XP with clear-type off, and is still superior to cufon what should we be doing?

Possible solutions:

• @font-face as default, Cufon with user agent sniffing for windows XP. (currently using, and very much not loving it)
• @font-face alone with yet unknown method of forcing clear-type
• Cufon alone :(
• Another paradigm all together

Failed solutions:

• Adobe Typekit (jagged in XP on their own website!, even though they show a smooth specimen jpeg)
• Google Webfonts (same problem with XP)
• @font-face alone (same problem with XP)

Cufon so far works everywhere, but just sucks, and offers additional challenges if you are animating anything, or wish to update the text after the fact.

Do you have a solution that works completely cross browser and cross OS? What is the best way to handle this?

Answer 1

I'm pretty sure the web-fonts, which look ugly, are missing some hinting (edit: Nope, even though hinting is still required to make a font look good on windows, the real problem here was the disabled ClearType in XP. However, this answer has a solution anyway).

Unlike font renderers on other operating systems the windows engine relies on hinting information shipped with the font. If the hinting is missing, bad or broken the font will look ugly - simple as that. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint. After adding the hinting you can generate the different web-font-formats (eof, woff, etc) you need from the enhanced TTF. Additionally you should try to use SVG fonts if font-smoothing is disabled, since they are always rendered with antialiasing.

I've written an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script to enable SVG fonts when necessary. Hope this helps :)

PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.

Answer 2

http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

This is what I have found works so far. This solution detects jagged fonts, so then we can do something like this: @font-face as standard, and Cufon as fallback.

Answer 3

In my case, I found that the answer does not in fact center on enabling Clear Type in WinXP. Whether Clear Type is enabled or disabled, I find that some of my @font-face English fonts (especially BLACK, SANS-SERIF) look bad in IE7 and IE8. It's sometimes more than just being jagged or having bad anti-aliasing. The big problem I see is that the shape of the font itself (some fonts, not all) seems to squish into something quite unattractive. I found an acceptable solution by following the advice of Torben. Font Hinting was all I needed, and again, that solution has nothing to do with Clear Type being enabled. To get the font hinting app up and running, read the instructions here:

https://gist.github.com/davelab6/3783491

(I used the "ttfautohint-0.95.tar.gz" file here): http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/

You should also review the documentation, and you need to also install MacPorts (or you will get an error in the Terminal during your build), but since my rep score prevents me from posting more than two URLs, you'll have to Google for that.

Better hinting doesn't mean your @font-face fonts will now look as perfectly smooth and great on IE in WinXP as they do on Macintosh browsers. But I found that the font hinting prevents nasty distortions in the shape of some fonts within IE7 and IE8. To me, that is an acceptable solution.

I can only add that it's rather troublesome to build the ttfautohintGUI on OSX. You have to installed hundreds of MB of software, downloading from multiple locations too, just to build the GUI app. But once done, the app allows you easily to hint your @Font-Face fonts and resolve many WinXP display issues. Just be sure to tick "Windows Compatibility" in the GUI (it's unticked by default). I also unticked the "Add ttfautohintinfo" and "Pre-hinting" options, leaving everything else as their defaults. Click "Browse..." to add your Input File (the font you want to hint), and then copy and paste that path in the Output File, changing the filename to whatever you want it to be. You won't enable the "Run" button unless there is something in both the Input File and Output File fields.

Best wishes.