Internet Explorer won't display font icon using @font-face

Question

I am having trouble getting a font to load properly in IE (IE9). Works fine in Chrome.

You can see the issue by looking at this Fiddle. In IE9 a box is displayed, while in Chrome a star is displayed.

I am using the FontAwesome package found here. I think the problem lies in the @font-face declaration at the top of the .css file (shown below). Can someone see why IE wouldn't render this font?

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/fontawesome-webfont.woff') format('woff'),
     url('../font/fontawesome-webfont.ttf') format('truetype'),
     url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
     url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

Figured out the issue. I had IE9 in compatibility mode. When I turned that off, the font started to appear.

Answer 2

In the jsfiddle, you are not setting font-family for any element, you are using italics (i element) but your @font-face specifies normal font only, and the jsfiddle does not demonstrate the issue because @font-face is missing (and would not work there, as the URLs are relative).

Moreover, your jsfiddle tries to style generated content, not normal content. The character used is a Private Use character (U+F060), and such characters are not supposed to be transmitted and used except by private agreements.

It is best to isolate the problem in the simplest case possible, to eliminate the effects of other issues (such as problems with generated content).