CODEWITHSUNDEEP
htmlcssinternet-explorer-8font-face
Matt Zelenak
Matt Zelenak

Reputation: 261

Can't get @font-face with Internet Explorer 8

I'm having trouble getting my client's custom font face to show up in IE8. It shows up in IE 9 & 7, and Chrome obv. I'm not sure why this one version of IE would be causing trouble. Here is my include statement in my html

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="../styles/ie/cherokee_ie.css" />
    <![endif]-->

And here is the cherokee_ie.css file

@font-face {
font-family: 'cherokee';
src: url('../../custom.eot');
src: url('../../custom.eot') format('embedded-opentype'),
src: local('☺'), url('../../font/custom.woff') format('woff'), url('../../font/custom.ttf')             format('truetype'), url('../../font/custom.svg') format('svg');
font-weight: normal;
font-style: normal;
}

h1 ul li {
  font-family:cherokee;
}

I'm not really sure what the smiley face on src: local is doing, but I found this code in another S.O. question that made it work perfectly in IE7 (or at least as far as I can see through BrowserLab.)

Also, is there a faster way to generate views than Browserlab?

Upvotes: 9

Views: 14688

Answers (1)

worenga
worenga

Reputation: 5856

Remove the IE Conditional and put this in your CSS

@font-face {
    font-family: 'cherokee';
    src: url('../../custom.eot');
    src: url('../../custom.eot?#iefix') format('embedded-opentype'),
         url('../../font/custom.woff') format('woff'),
         url('../../font/custom.ttf') format('truetype'),
         url('../../font/custom.svg#cherokee') format('svg');
    font-weight: normal;
    font-style: normal;

}

also use '...' for custom font-face fonts like so

h1 ul li {
  font: 18px/27px 'cherokee', Arial, sans-serif;
}

Also check whether your paths are set correctly.

Upvotes: 4

Related Questions