Geek Answers Handbook

@ font-face crash IE8

I just installed the Aller Regular and Aller fonts in bold on my site via @ font-face (generated by fontsquirrel.com ).

Here is the CSS:

@font-face { font-family: 'AllerRegular'; src: url('library/fonts/aller_rg-webfont.eot'); src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('library/fonts/aller_rg-webfont.woff') format('woff'), url('library/fonts/aller_rg-webfont.ttf') format('truetype'), url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AllerBold'; src: url('aller_bd-webfont.eot'); src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'), url('library/fonts/aller_bd-webfont.woff') format('woff'), url('library/fonts/aller_bd-webfont.ttf') format('truetype'), url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg'); font-weight: normal; font-style: normal; }

This works fine when I use the font ether in firefox, however, when I use IE8, the web page crashes due to trying to open again and will work again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/

Does anyone know what causes this madness?

+7
source share
3 answers

I had the same problem a while ago, and after some debugging, I found that the crash due to @font-face (which in my case was included as a separate stylesheet called fonts.css) was displayed inside <head> , IE8 has problems with this, but works fine when I only moved the rendering inside the <body> .

Try the following:

 <head> <!--[if gt IE 8]><!--> <link href="fonts.css" rel="stylesheet" type="text/css"> <!--><![endif]--> </head> <body> <!--[if IE 8]> <link href="fonts.css" rel="stylesheet" type="text/css"> <![endif]--> <!-- The rest of your page here --> </body>

This displays the font style sheet in your head if the browser is later than IE8. If the browser is IE8, it only displays it inside your body.

Note. You may need to adjust conditional comments if you support IE7 or later.

+9
source

IE8 seems to prefer double quotes. This fixed, unchanging text on first boot for me can fix errors for you.

Kudos to the guy here who solved my problem: @ font-face does not integrate into IE8 and under

+4
source

I had a similar development page with custom fonts. IE8 crashed. I fixed this by placing an IE8 font declaration in front of any other font declarations. I.e:

 <!-- Custom .eot fonts for IE8 --> <!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash --> <!--[if lt IE 9]> <link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" /> <![endif]--> <!-- Custom .woff fonts --> <link href="/pub/stylesheets/fonts.css" rel="stylesheet">
+1
source

More articles:


All Articles