IE8 and Fontawesome: @fontface fonts show as boxes on some machines

Posted on by

I’m working on an HTML5 project that uses Fontawesome symbols for the Previous and Next buttons.

fontawesome arrow

On most browsers including IE8, @fontface fonts just work, most of the time. They won’t work if IE8 is in compatibility view, but  I added this declaration at the head of the document to force IE8 into IE8 mode, so it should work all of the time: 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Yet the arrow symbols showed up as boxes on some machines! After trying a number of other solutions, I found one that works: moving the HTML5 shim code for IE to the bottom. The shim  generates IE 8-compatible elements to replace those HTML 5 elements that IE 8 can’t comprehend. I suspect, but am not sure, that the reason it works is that these problem machines are slower than most, and it takes longer to load whatever part of the DOM the HTML5 shim is working on. This would explain the sporadic nature of the problem. Most machines work, but some do not.

To fix the problem, move the HTML5 shim to the end of the document, just before the closing </body> tag.

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <link id="ie-style" href="css/ie.css" rel="stylesheet">
 <![endif]-->
<!--[if IE 9]>
 <link id="ie9style" href="css/ie9.css" rel="stylesheet">
 <![endif]-->

 

 Resources