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

css internet-explorer-8 font-face

49,184

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!

Solution 5

Workaround:

Find stylesheet and reload on document ready if IE8:

Sample HTML:

<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>

Sample JavaScript:

// Reload stylesheet on document ready if IE8
if ($.browser.msie && 8 == parseInt($.browser.version)) {
    $(function() {
        var $ss = $('#base-css');
        $ss[0].href = $ss[0].href;
    });
}

View more solutions

49,184

Author by

Admin

Updated on October 16, 2020

Comments

Admin over 3 years
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.