Custom fonts not working in ie 8 and below

问题:

My custom fonts aren't rendering in ie8. I've allready tried clearing the cache, and I'm also sending the correct filetypes if I'm not mistaken. What am I missing here?

@font-face {
font-family: 'Lobster';
src: url('fonts/lobster.eot');
src: url('fonts/lobster.eot') format('embedded-opentype'),
     url('fonts/lobster.woff') format('woff'),
     url('fonts/lobster.ttf') format('truetype'),
     url('fonts/lobster.svg#Lobster1.4Regular') format('svg');
}

.logoHome{color:#FFF; font: 58px Lobster, serif; text-decoration:none; line-height:58px;}

回答1:

the problem it is easy solve, just make the url path to be relative:

 @font-face {
    font-family: 'Lobster';
    src: url('http://www.sample.com/fonts/lobster.eot');
    src: url('http://www.sample.com/fonts/lobster.eot?#iefix') format('embedded-opentype'),
         url('http://www.sample.com/fonts/lobster.woff') format('woff'),
         url('http://www.sample.com/fonts/lobster.ttf') format('truetype'),
         url('http://www.sample.com/fonts/lobster.svg#Lobster13Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

but this will only work down to IE8 you can use this caniuse.com to always check which thing you can use in older browsers

回答2:

The first line gave an error. Removing:

src: url('fonts/lobster.eot');

Did the trick.