IE8 CSS @Font-Face Fonts Only Working for :Before Content on Over and Sometimes on Refresh/Hard Refresh

font-face doesn't appear to be working in IE8?

You need to supply an EOT version of your font in order for older versions of IE to embed it. They won't recognize any other format, which is why you're observing the fallback to Arial.

Take your font to the Font Squirrel @font-face Generator and it'll prepare everything for you, including a new set of CSS @font-face rules to use over your existing ones.

Icon Font causes Compatibility Mode in IE8

Long story short, there are two ways to solve this:

• assign to the Basic Latin Range : U+0020 to U+007F
• assign to the Low Surrogates Range : U+DC00 to U+DFFF

I found this through unit testing various ranges with my custom icon font using a grunt-webfont build process.
I didn't exhaustively test every range, but I found these two to work, and to be sufficient.

Notes: The Basic Latin Range starts from U+0020 not U+0000.
The Low Surrogates Range has a larger address space, and so is preferrable if you have a lot of glyphs. It also has the advantage of rendering square boxes if the glyph fails to load, as opposed to assorted Latin characters as the Basic Latin Range does.

IE8 does not apply the style even when its Developer Tools shows it

I think I may have found an answer. It appears from my searches for similar posts, the problem is with IE's handling of pseudo elements. Unfortunately, I number of answers/suggestions on these posts don't appear to work in my case, except for this SO item. Basically, it suggests forcing IE to redraw the pseudo element by temporarily adding to the DOM a style tag which removes all pseudo content, and then removing that style tag immediately afterwards. It seems to work, when combined with a check for IE8 based on this SO item. I added this to my script:

var ie = (function () {
    var undef,
    v = 3,
    div = document.createElement('div'),
    all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                        all[0]
                        );
   return v > 4 ? v : undef;
 } ());

 function redrawPseudos() {
    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);
 }

So when I have to add/remove a class, which I expect to impact the styling of a pseudo element, I have to do this:

 $('.class1').addClass('newclass');   
 if (ie === 8) {
    redrawPseudos();
 }

It is probably an expensive way of doing it. But I only have less than a dozen of pseudo elements.

ADDED:

You can improve this by passing a selector to redrawPseudos() and including it to the style. This will limit the redraw to the elements identified by your selector.

function redrawPseudos(sel) {
    ...
    style.styleSheet.cssText = sel + ':before, ' + sel + ':after, ' + sel + ' *:before, ' + sel + ' *:after ' + '{content:none !important;}';
    ...
}

---

Related Topics