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.