@font-face not working IE7 and IE8? – Fix

Posted Tuesday 30th Oct 2012 by Claire Jennings No Comments

I love Google Fonts (powered by @font-face), it’s a great library of open source fonts it’s been populated by some really nice fonts, some of my favourites exist here. The other day, upon developing my latest website, i found my font was not loading as it should in IE7 and IE8. Because of Internet Explorer’s track record, it didn’t surprise me either!

I did a little research and discovered that the files that Google (@font-face) uses, are not fully supported in IE7 and IE8. Google uses Woff files, whereas, to ensure your font is fully crossbrowser compatible, you have to load trutype, eot and svg as well.

Two Simple Steps

1) To convert your fonts to eot, svg and trutype, you can easily do this using Font Squirrel. You just need to source your Woff file, upload it to Font Squirrel, and you can then download a nice Zip file with all file conversions in ready to use.

2) Then once you have uploaded all your fonts, you can then add the following to your Stylesheet:

@font-face {
font-family: 'MyFontFamily';
src: url('../fonts/fontname-webfont.eot?') format('eot'), 
     url('../fonts/fontname-webfont.woff') format('woff'), 
     url('../fonts/fontname-webfont.ttf')  format('truetype'),
     url('../fonts/fontname-webfont.svg#svgFontName') format('svg');
}

Nice simple one, but very handy.

By Claire Jennings

Claire loves to design pretty website's all day long, she especially likes creating Magento and Wordpress based websites, and finding out new nifty tricks along the way. In her spare time likes to make Truffles, Think up new ideas whilst brushing her teeth, and change her hair colour. (On that note what colour shall i do next?)

See all of posts.