开发者

ie 8 problem with custom google font

I'm working on a site, using custom google fonts, but in ie8 not work开发者_运维百科ing or just partially(left content good, and a right content, ajax, not so good) any suggestion or idea why not so good?

Thanks.

ie 8 problem with custom google font


I just saw your website in compatibility mode in IE8 of my IE9, and I do not see any font problems. I run window 7, cna you please post a picture of your problems?

ie 8 problem with custom google font

UPDATE: I forgot an important thing... to check about compability. IE7 and IE8 have only "partial" compability with font-face.

To solve the issue you have to use a code similar to this, and convert fonts

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

Google is using only woff, while you have to load eot, trutype and svg as well for full crossbrowser compability.

You can convert fonts easily at Font Squirrel, download the font from http://themes.googleusercontent.com/font?kit=tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA

For more information on the matter: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax


In IE9 and IE7 compatibility mode using IE9 it shows fine; in IE8 and IE7 compatibility mode using IE8 it looks very bad so I would have to conclude that it´s some obscure bug in IE8 itself.

I don´t think there's much you can do about that so to solve it I would just use conditional comments to address IE8 and IE7 and use verdana for that section. And hope they go away soon...


FOR IE10 and below and for all other browsers use

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?'); 
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜