Font Awesome fonts show up as boxes on IE8

Question

So I am using Font Awesome in a project and in testing I'm running into issues with IE8.

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.

enter image description here

My code is:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

I have the four font files...

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff

...where they belong and they are readable by the world (755 permissions). What am I missing? Do I have to do something with compatibility view in IE8?

The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.

As requested, a copy of font-awesome.css is here: font-awesome.css. It is more or less what I downloaded from them with the exception of the path to the font files.

Based on @Abody97 I added https://html5shim.googlecode.com/svn/trunk/html5.js into the mix (Code above has been updated). Still no luck, even after a refresh and a delete cache refresh.

Can we see the content of font-awesome.css? The problem is most likely there... Also, IE8 will be using the eot file, whereas ie9 probably uses the woff. my guess would be that the css file has the wrong path for the eot or something similar. — Nico Burns
@Nico Burns - I updated the post to include a link to a copy of the .css file — Jason
@Abody97 - I can't say for sure I have that set. Is that something I set in IE8? (Can't say I've ever done that before) I was under the impression <meta charset="utf-8" /> did that for me... — Jason
@Jason It's usually in the Page menu -> Encoding. It's set to UTF-8 by default, but it can't hurt to be extra sure. — Chris

rolegio rolegio · Accepted Answer · 2013-04-25T14:53:45

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.

Add ?#iefix to the eot url in the CSS that contains the font-face (in this case font-awesome.css)

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Font Awesome fonts show up as boxes on IE8

10 Answers