Best IT Recipes

IE8 CSS @ font-face fonts only work for: before content, and sometimes when updating / hard updating

UPDATE: I wrote a blog post about what I learned about this issue. I still do not quite understand this, but I hope someone reads this and sheds light on my problem: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

I have a page where I use @ font-face to import a custom font for icons. Icons are created using the class:

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

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

However, in IE8, I have a strange error. When the page loads, the font does not work. Instead of badges, I have letters everywhere. As soon as I hang over the page (body), half the letters will become an icon. The rest become icons when I hang over them.

SO font-face embeds correctly. Font and content family properties also work, but something else causes the icons to load only after hovering.

So, there is some kind of error with @ font-face in IE8 when you try to use a font with: before {content: 'a'}, but I have no idea what this error is.

I was looking for a watch here for a similar problem / IE8 problem / nothing, but I'm out of luck and I'm going to go crazy. Any suggestions?

Let me know if I can provide more information that may be helpful.

EDIT: Updated broken link to blog post.

+57
css internet-explorer-8 font-face
Mar 21 2018-12-21T00:
source share
15 answers

I had the same error.

I fixed it by running 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 allows IE8 to redraw all the :before and :after aliases

+71
May 11 '12 at 19:55
source share

I recently came across this and fixed it by including @ 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-08-20

+22
Feb 27 '13 at 9:15
source share

I experimented with exactly the same problem. In IE8, the webfont icon (using pseudo-elements) sometimes displays a fallback font, but when you hover over it, the webfont icon appears.

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

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

The problem was ridiculously resolved by 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 am happy now :) I hope this helps!

+18
Apr 09 2018-12-12T00:
source share

I had a similar problem where the font did not appear until I moved over the parent element. I was able to fix this problem by triggering a focus event on the parents of the elements.

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

Hope this helps someone!

+5
Jan 14 '14 at 15:00
source share

Workaround:

Find the stylesheet and reload the finished document if IE8:

HTML example:

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

JavaScript example:

 // 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; }); }
+4
Apr 18 2018-12-12T00:
source share

The above solutions did not fix the problem for me when IE8 is updated. I also found some problems when adding a stylesheet would violate IE8's background size correction backgroundsize.min.htc

So here is what I did:

Add ie8 tag to html tag:

 <!--[if IE 8 ]><html class="ie8"><![endif]-->

Add loading class to body:

 <body class='loading'>

Cancel CSS attribute for IE8 only:

 <style> .ie8 .loading .icon:before { content: '' !important; } </style>

Now remove the load class in the DOM ready:

 $( function() { $('body').removeClass('loading') } );

Now it works!

+4
Jan 21 '14 at 15:29
source share

Based on the answer from @ausi, you can reorganize this with jQuery and CoffeeScript up to 4 lines:

 $(document).ready -> $style = $('<style type="text/css">:before,:after{content:none !important}</style>') $('head').append $style setTimeout (-> $style.remove()), 0

or with JavaScript syntax:

 $(document).ready(function() { var $style; $style = $('<style type="text/css">:before,:after{content:none !important}</style>'); $('head').append($style); return setTimeout((function() { return $style.remove(); }), 0); });
+2
Apr 15 '14 at 10:00
source share

I had a similar glitch in Chrome. Here is my fix:

 setTimeout(function(){ jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>'); },100);

My guess is that the pseudo css style was rendered before the webfont was ready, resulting in empty glyphs. After loading the page, freezing or changing css in any way caused them to magically. So my fix just causes the css update to do nothing.

+1
Apr 08 '14 at 16:48
source share

For me, the problem was simply resolved with the !important declaration in the content attribute.

i.e:.

 .icon:before { content: "\f108" !important; }
+1
Jul 16 '14 at 13:04 on
source share

Ok, so I tried to fix this problem for a while. Oddly enough, the icomoon demo continued to work in IE8, but mine never did, although I felt like I had almost the same thing in place. So I started to nod everything (icomoon demo, as well as my own implementation) and that I found two things that had to be there for this to work.

Firstly, I found that I need to save the cache in the file name.

So, in my implementation, I had:

 @font-face { font-family: 'iconFont'; src:url('icon_font.eot'); src:url('icon_font.eot') format('embedded-opentype'), url('icon_font.woff') format('woff'), url('icon_font.ttf') format('truetype'), url('icon_font.svg') format('svg'); font-weight: normal; font-style: normal; }

But I needed:

 @font-face { font-family: 'iconFont'; src:url('icon_font.eot?-v9zs5u'); src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'), url('icon_font.woff?-v9zs5u') format('woff'), url('icon_font.ttf?-v9zs5u') format('truetype'), url('icon_font.svg?-v9zs5u#icomoon') format('svg'); font-weight: normal; font-style: normal; }

Secondly, and it does not make sense, it is that I need something in the stylesheet with the pseudo-selector :hover . It doesn’t matter what it is or what rules it is for him, he just needs something, and then the icons will appear when I hang over them.

So, I just inserted [data-icon]:hover{} into my CSS stylesheet (just like that, without any rules).

I would like to explain to you why this works, but I do not understand. My best guess is that this causes some update in IE8 and causes icons to appear.

0
Jun 29 '15 at 17:47
source share

My problem with IE8 was resolved by removing the double colon in the pseudo-element selector.

Does not show icon in IE8 ...

 .icon::before { content: "\76"; }

Has an icon in IE8 ...

 .icon:before { content: "\76"; }
0
Oct 14 '15 at 9:03
source share

So, here is the @ausi solution that I used that worked for me. This decision is taken from Adam's comment at the bottom of this article http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

I thought I put it here in more detail to make it faster for others.

Define an additional class, for example. ie-loading-fix in the html tag for IE8. Include all your CSS, and then after that you have a conditional JS file for IE8. For example:

 <!DOCTYPE html> <!--[if IE 8]> <html class="ie-loading-fix"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Include all your CSS before JS --> <link rel="stylesheet" type="text/css" href="css/main.css"> <!--[if lt IE 9]> <script src="js/ie.js"></script> <![endif]--> </head> ...

Then at the top of your main CSS file there is something like:

 .ie-loading-fix :before, .ie-loading-fix :after { content: none !important; }

Then, in your IE8 js/ie.js specify the following:

 window.onload = function () { var cname = document.documentElement.className; cname = cname.replace('ie-loading-fix', ''); document.documentElement.className = cname; }

This JS will remove the ie-loading-fix style, which hides all the contents :before and :after and causes IE8 to redraw all the contents :before and :after after the page loads.

This solution fixed an issue that I encountered with Font Awesome v4.4, which often switches IE8 to compatibility view or crash, even if I explicitly set the page load in Edge mode using the meta tag.

0
Oct. 16 '15 at 3:48
source share

If I'm not mistaken, IE does not read the TTF font, this requires EOT fonts

-one
Mar 21 '12 at 17:03
source share

I did some research according to the @vieron answer , and it turns out that another way to fix this problem is to block the page from displaying for a few milliseconds so that the font can be loaded to the content. Although blocking the display of pages is not the smartest way to solve this problem, because you cannot know how many ms you should block.

I proved this by putting the php file as the source file for javascript.

 <!--[if lt IE 9]> <script src="/block.php"></script> <![endif]-->

block.php

 <?php usleep(200000); ?>

If you have external javascript libraries, such as HTML5shiv, this happens automatically, except that you start the site on a local network (intranet or localhost) with very low latency and without scripts in front of the content.

This explains the fact that the problem is not more common and noticed.

I really tried to find an elegant solution, but I can not find something that excludes javascript or block page display for IE.

-one
Dec 21
source share

This fix, we encountered this problem with IE7, IE8 and IE9 when using ajax

 setInterval(function(){ var $ss = $('#base-css'); $ss[0].href = $ss[0].href; },300);
-four
May 16 '12 at 8:50
source share


More articles:


All Articles