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

Solution 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

Solution 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

Solution 3:

I was experimenting exactly the same problem. In IE8 the webfont icon (using pseudo-elements) sometimes renders the fallback font but when you hover it the webfont icon comes visible.

The icons were implemented using :after and :before with IE7 support, like this.

In my case, the project is developed in HTML5 and using htmlshiv to support the new HTML5 tags in older browsers.

The problem was ridiculously solved placing the html5shiv script tag below the main CSS:

<link rel="stylesheet" href="/stylesheets/main.css" type="text/css">
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I'm happy now :) I hope that helps!

Solution 4:

I was having a similar issue where the font would not show up until I hovered over the parent element. I was able to fix this problem by triggering a focus event on the elements parent.

element.parent().trigger('focus');

Hope this helps someone!