Let me preface this post by stating that I have the design talent of the average developer – that is to say: none. So when I decided to start learning about CSS3 @font-face I thought I was going to be in for a night of pain…and boy was I right.

The post headings on site are rendered in the Museo font using Cufon. Cufon is an amazing piece of JavaScript that allows you to embed fonts into webpages making them visible in all browsers. It works as advertised, however it has a habit of causing pains for visitors on slower connections. For this site, the cufon script is 17.8KB and Museo font package is an added 190.4KB – a hefty download. At this point, the developer in me would declare the benefits not to be worth the drawbacks and scrap it alltogether. Luckily for all of you though, I’m constantly surrounded by talented designers, namely That Stevens Guy and begrudgingly blindly follow what they tell me to do in said department. So cufon stayed.

Cufon uses an individual canvas tag for each word in browsers supporting it. I have a feeling this must place a substantial strain on the browser – especially on longer strings such as paragraphs. It also means adding a reliance on JavaScript and so will not work in any browsers that either block the script or have JavaScript turned off. Is there a better solution though? Meet @font-face.

CSS3 has introduced a nifty feature that has actually been in the browser we love to hate since version 5.5. @font-face allows us to embed font files directly into webpages without the need for JavaScript and this often result in far smaller files to transfer and in turn a faster page load. I tracked down a free copy of the Museo ttf on a random font site and embedded it CSS style: It was beautiful. It was marvelous. It didn’t work on Windows.

Why you may ask? For some reason @font-face isn’t being anti-aliased on Windows – even with ClearType turned on. Here’s a screenshot from my Windows 7 machine and the equivalent on my Ubuntu machine. Please view at full size to see what’s going on.

After a considerable amount of reading on the subject I discovered that WIndows XP wasn’t originally shipped with ClearType and some machines may have it turned off by default. On these machines, almost all embedded fonts will ‘look like ass’, however this problem also seems to be occuring on Windows 7 with ClearType turned on. This doesn’t bode well for @font-face so how can we fix it?

Possible Fixes

• Chrome/Opera: You can embed SVG fonts. I haven’t tested this yet so let me know if it works.
• Internet Explorer 7/8: CSS Filters(Oh god, please kill me now)

  h2 {font: 36px/44px 'MuseoSans500', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

• Firefox/Safari: Looks like we’re out of luck here. The best solution I found was to use text-shadow and try to ‘conceal’ the rough edges. Here’s a good article on the subject including possible future fixes.

If you have any solutions for Firefox or Safari on Windows, or anything at all to add to the subject please feel free to comment below – this would be a great help to not only me but web developers around the globe.