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?
What does <font face=""> do? Was used to specify a typeface. Deprecated. Use CSS instead.
TrueType Font (TTF) TTF has long been the most common format for fonts on Mac and Windows operating systems. All major browsers have supported it.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With