IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

Question

UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

I have a page where I'm using @font-face to import a custom font for icons. The icons are created with a class:

.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}

And voila, I have whatever icon is used for "A". Pretty standard stuff, works in all browsers, including IE8.

However, in IE8, I have a bizarre bug. When the page loads, the font is not working. Instead of icons, I have letters all over the place. Once I hover OVER the page (body), half the letters become icons. The rest become icons when I hover over them.

SO the font-face is embedding properly. The font-family and content properties are both working, but something else is causing the icons to load only after hover.

So there's some sort of bug with @font-face in IE8 when you try to use the font with :before{content: 'a'} but I have no idea what the bug is.

I've searched for hours on here for a similar bug/IE8 issue/anything, but I've had no luck and I'm about to go crazy. ANY suggestions?

Let me know if I can provide anymore info that might be helpful.

EDIT: Updated the broken link to the blog post.

Answer 1

I had the same bug.

I fixed it by executing this script on domready (only for IE8 of course):

var head = document.getElementsByTagName('head')[0],     style = document.createElement('style'); style.type = 'text/css'; style.styleSheet.cssText = ':before,:after{content:none !important'; head.appendChild(style); setTimeout(function(){     head.removeChild(style); }, 0); 

This lets IE8 redraw all :before and :after pseudo elements

Answer 2

I recently encountered this as well, and fixed it by including the @font-face twice in my CSS file. The first @font-face is used by IE and the second is used by other browsers.

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), 
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), 
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

Source: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20