Sadly IE8 is still a browser we need to build for. Sometimes loading a set of local webfonts can break the whole website, as needed resources are not being loaded or timeout.

Best way is to split IE8 webfonts loading from other browsers, by using conditionals:

<!--[if lt IE 9]>
 <link rel="stylesheet" href="fonts.ie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if gte IE 9]><!-->
 <link rel="stylesheet" href="fonts.css" type="text/css" media="screen" />
<!--<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

IE8 webfonts CSS

@font-face {
	font-family: 'Black';
	src: url('black-webfont.eot');
	
}
@font-face {
	font-family: 'Regular';
	src: url('regular-webfont.eot');

}
@font-face {
	font-family: 'Bold';
	src: url('bold-webfont.woff.eot');
	
}

@font-face {

font-family: 'Black';

src: url('black-webfont.eot');

}

@font-face {

font-family: 'Regular';

src: url('regular-webfont.eot');

}

@font-face {

font-family: 'Bold';

src: url('bold-webfont.woff.eot');

}

Only loading the required .EOT files.

IE8 webfonts preventing site from loading

IE8 webfonts CSS

Enjoy coding ….

Alexander