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

Question

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?

Solution

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.

Comments

[Ry-]

As for the smiley: it stops Internet Explorer from reading the rest of that value and trying to use the other types of fonts and their format()s, which it doesn't support.

[Ry-]

Anything will work - the trick is that IE doesn't support local() at all. The reason uncommon characters are used is to stop actual local fonts from being accessed, which can sometimes result in security issues. This article has some more information.

[worenga]

Are you sure your IE conditional is necessary?