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?

Queenie

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. – Profitable

Oh, neat. I didn't know you could do that. Is that special to that special character, or can you do that with any empty character? – Queenie

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. – Profitable

Are you sure your IE conditional is necessary? – Elkeelkhound

Answer 1

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.

Elkeelkhound