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

I'm having trouble loading a font in IE (IE9). Works great in Chrome.

You can see the problem by looking at this Fiddle . IE9 displays a window, while Chrome displays an asterisk.

I am using the FontAwesome package found here . I think the problem is with the @ font-face declaration at the top of the .css file (shown below). Can anyone understand why IE won't display 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;



source to share

2 answers

Figured out the problem. I have IE9 in compatibility mode. When I turned this off, the font started to appear.



In jsfiddle, you don't set font-family

for any element, you use italic ( i

element), but yours @font-face

only specifies the normal font, and the jsfiddle doesn't show the problem because @font-face

(and won't work there, since urls are relative).

Also, your jsfiddle is trying to create generated content, not normal content. The character used is a private use character (U + F060), and such characters should not be transmitted or used except in private conventions.

It is best to isolate the problem in the simplest case, to eliminate the consequences of other problems (for example, problems with the generated content).



All Articles