Fix fonts – Google Font API that don’t display properly in IE

Written by on July 28, 2010 in CSS - 11 Comments
google

Well that was a long title! Here’s the deal. I finished up a website for a client yesterday and was doing a last minute check in Internet Explorer to make sure there were no problems. Well that would be too easy, wouldn’t it?! Unless you’ve been under a rock the last few months you know about the Google Font API. They host fonts and give you the code to embed them onto your website. A great solution, and free, unlike Type Kit.

Well since it’s a Google product I figured it was obviously cross browser safe. So I was surprised (and not pleasantly) when I opened my clients site in Internet Explorer and saw that instead of the font Josefin Sans Std Light showing up, (I am using it for headings and navigation items on the website), the browser was showing Arial. WTF? Popped open Safari, no problem. Looked in Chrome, and again, Arial was showing! So I went to the source, the page right on the Google Font API website where you can preview the font. And after looking at that page in the browsers, I realized something important: The fonts in the Google Font API are NOT cross-browser compliant!

If you open the preview page on the Google Font API site for the font Josefin Sans Std Light in different browsers, you’ll see the following. Firefox displays the font correctly, while Internet Explorer (I tried 7 & 8), and Google Chrome don’t display it correctly. YES, you heard correctly, the font in the GOOGLE Font API doesn’t work in the GOOGLE browser. Sweet.

And in case you’re wondering if it was just this one font that is having a problem, it isn’t; I checked and found that other fonts aren’t displaying properly either.

Enough bitching, what’s the solution? I am ready to launch my client’s website and she already approved this font, so I’m not about to waste time or compromise the design of the site by picking a different font.

Font Squirrel to the rescue!!

I’ve seen this site before and honestly never had a reason until now to use it. But what a life saver it was today.

First I went to the page on the site for the Josefin Sans Std Light font. Hit the button to download the font to your desktop.

Next, go to the Font Squirrel @font-face Kit Generator. Hit “Add Fonts” and choose the font you just downloaded. Once it’s uploaded hit “Download Your Kit”. This will give you a zip file with everything you need to embed the font on your website. I popped open the demo HTML page they give you, opened it in the browsers, and voila:

So now I’ll pop that code into my client’s site and problem solved! Now that being said, it doesn’t make much sense to go to the Google Font API to pick a font just to embed it with a different technique. I probably wouldn’t have chosen this font except that I liked the simplicity of the Google embedding system. I’m sure they’ll work it out in the future; but if you’re like me and need a quick solution to this problem NOW, Font Squirrel and embedding fonts with @ font-face might be the answer for you too.

Sponsors

About the Author

Mike Ilsley "ilz" is a Boston based website designer, front-end developer, WordPress addict, owner of Beantown Design, and exclusive ThemeForest author. Follow him on Twitter and Facebook, and don't forget to subscribe to the WebDesign&Such email RSS feed. Also, check out his latest project, jQueryMobileShowcase.com.


  • Pingback: Webmaster Crap » Blog Archive » Use @font-face to fix fonts from the Google Font API that don't …

  • Elmas

    Just wanted to add to the post. I had issues with latin 2 characters for Croatian language. Only in IE 6,7 + my browser on android (desire) were not displaying characters like ?š??ž. With @font-face that problem is solved.

  • Niels

    I’m running into similar problems with the ‘Nobile’ font. It’s just not displaying characters the right way. (too small, or the dot of the ‘i’ is way to low)
    Followed your steps, which kind of fixed the problems for one browser, but messed it up for the other. I’m giving up on this font now…

    • ilz

      What browser did it mess it up in?

  • http://www.keithparent.com Keith

    i have actually combined the best aspects of the two and use the Google Webfont javascript to load the fonts/stylesheets i generated via Squirrel Fonts – it allows a solid technique to better (and mainly, quicker) load up the fonts with the least amount of FOUC yet better support all intended platforms to the best of my technological abilities. while some fonts aren’t as well designed and/or optimized as others for screen display (and furthermore) with Windows Cleartype popping type-rendered pixels how it will for better or (in most cases) worst, there are (almost near) necessary options on the Font Squirrel generator that better optimize the screen rendering specifically for Windows – what is missing that no one ever seems to make an open note about is that the CSS font-sizing and line-height sometimes needs to be individually on a case by case basis tweaked to better ‘assist’ the embedded fonts to display better with Cleartype turned on. this is much akin to older versions of Flash having type-rendering issues that required the x-coordinates and y-coordinates to manually set to certain random (plus or minus) increments in the tenths of a point.. . never knew for sure until you published, refreshed and then played the .swf – argh. but just look at Flash’s text-rendering now – it renders better than any browser, application or for that matter any OS, hands down. too bad i dropped flash a few years back and started riding the jquery train back even before Google’s and Microsoft’s CDNs and it’s inclusion into every other blog tutorial and open-source platform under the world widemus webicus.. . *deep inhale* :)

    great article, btw – call ‘em out when you see ‘em. maybe Paul Irish himself will pop over and address the matter. if he can, idk.

    • ilz

      Interesting… thanks for the idea!

    • http://www.hedberg.biz Henrik

      “I have actually combined the best aspects of the two and use the Google Webfont javascript to load the fonts/stylesheets i generated via Squirrel Fonts”

      Sounds interesting, could you give some hints on how to implement this in practical terms?

    • ndre

      Keith how you implemented the best aspects of the two? can you please explain?

      thanks

  • http://www.jeffroush.com Jeff Roush

    This helped a lot. Thanks!

  • Bokiboka

    Wowww great tips thanx

  • http://etsur.com Christopher Healey

    We just recently had to do the same thing on our site. It worked fine several weeks ago and then apparently google updated the font api and we checked and BAM it was broken.

    The funny thing is that it still rendered the correct font in IE which was the only offender. The more interesting thing is that it appeared to just not like to pull more than one parameter which I found particularly interesting. It’d pull the light, or normal or bold version just fine if they were the only parameter but try and put them all together (as google suggest) and no dice.

    Yay for font squirrel saving the day!