I just installed the fonts Aller Regular and Aller 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 is working fine when I use ether of the fonts in firefox, however when I use IE8 the webpage crashes attempts to reopen and crashes again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/
Does anyone know what's causing this madness?
I had the same problem a while ago, and after some debugging I found that the crash was because of the @font-face (which in my case was included as a separate stylesheet called fonts.css) was rendered inside <head>. IE8 has a problem with this, but works just fine when I moved the rendering to just inside <body>.
Try this:
<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 renders the fonts stylesheet within your head if the browser is newer than IE8. If the browser is IE8, it renders it just inside your body.
Note: You may have to adjust the conditional comments if you're supporting IE7 or older.
IE8 seems to prefer double quotes. This fixed unstyled text on first load for me, might fix crashes for you.
Kudos to the guy here, which solved my problem: @font-face not embedding in IE8 and under
I had similiar issure developing page with custom fonts. IE8 crashed. I fixed it by placing IE8 font-face declaration BEFORE any other font-face 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">
