Problem: @font-face not working in IE9

I was working on a bug fix for a website and I came across an issue where @font-face was not working properly in only IE9. Everything seemed to work in IE8 and even IE7  [Don't you hate browser compatibility issues].  To be honest, I hadn’t had much experience working with custom fonts so I did some research. The most common reason for @font-face browser compatibility problems is a missing font format. Different browsers use different formats. I put together a list:

Internet Explorer 8 and Lower:    .eot
Internet Explorer 9:  .woff
Safari: .ttf and .otf
Firefox:  .ttf , .otf,  and .woff
Google Chrome:  .ttf , .otf, .svg (on older builds),  and .woff

If you are missing a format then I would recommend visiting Font Squirrel. They provide free @font-face packages.

I hadn’t looked at the stylesheet yet but i assumed the problem was that the client didn’t have a .woff version of the typeface. Wrong. Here is a simplified version of what I found when I looked a the code:



@font-face {
    font-family: 'SpecialFont';
    src: url('fonts/special.eot?') format('eot'),
         url('fonts/special.woff') format('woff'),
         url('fonts/special.ttf') format('truetype'),
         url('fonts/special.svg#specialFont') format('svg');
}

Not only did the client have every version of the font, but they followed the ‘bulletproof’ version suggest by Paul Irish. I was stuck.

Solution:

The solution turned out to be very simple. Found it on FontSpring (see link below).  If your @font-face font is not working in IE9 change format(‘eot’)  to format(‘embedded-opentype’).  This is my new bulletproof version of @font-face as of 5-26:



@font-face {
    font-family: 'SpecialFont';
    src: url('fonts/special.eot?') format('embedded-opentype'),
         url('fonts/special.woff') format('woff'),
         url('fonts/special.ttf') format('truetype'),
         url('fonts/special.svg#specialFont') format('svg');
}

Hope that solves some of your issues!

For more troubleshooting  information on @font-face I would recommend these links:

The New Bulletproof @Font-Face Syntax – Font Spring
Trouble Shooting @font-face – Font Squirrel
Bulletproof @font-face syntax – Paul Irish