2

@Font-Face Windows Woes

Posted May 29th, 2010 (Updated 29 Oct 2011) in Uncategorized

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.

Font Face Anti-Aliasing on Windows & Ubuntu
Font Face Anti-Aliasing on Windows & Ubuntu

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.

  • Ben Friday

    Hi there, thanks for the excellent write-up about the Windows @font-face issue. What the hell eh? (Sorry, Canadian)

    Has any light been shed on this, that you know of?

    Cheers!

    • Flynsarmy

      Hey Ben,

      I haven’t kept too up to date on the issue other than implementing it for the headings on this site. I believe it’s pretty much solved in Windows 7 and it’s really just XP that you’ll run into problems with.

      I ended up using a variation of Paul Irish’s Bulletproof @font-face Syntax that got every browser in XP working sans Opera. If you’re looking to put it on your site, you may want to start there and have a copy of XP with every browser installed to test with.

      If it helps, here’s what I put into my CSS:

      @font-face {
      font-family: 'Museo';
      src:
      url('assets/fonts/museo/Museo500-Regular-webfont.eot?') format('eot'),
      url('assets/fonts/museo/Museo500-Regular-webfont.svg') format('svg'),
      url('assets/fonts/museo/Museo500-Regular-webfont.woff') format('woff'),
      url('assets/fonts/museo/Museo500-Regular-webfont.ttf') format('truetype');
      }