CSS @font-face not working in IE8

Question

I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT , but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code

@font-face {
  font-family: "Klavika Regular";
    src: url('../fonts/klavika.eot');
    src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

this works in ie8/9

http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html

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

}

Answer 2

值得检查您的.htaccess文件是否允许文件类型。

Answer 3

if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like

src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9

so only IE8 will read the last src line and thus load the .eot.

Answer 4

在FontSquirrel Generator上为@ font-face尝试三种CSS格式（在“EXPERT ...”模式>“CSS格式：”>“更多信息”部分中）