ie 8 problem with custom google font

Question

I'm working on a site, using custom google fonts, but in ie8 not working or just partially(left content good, and a right content, ajax, not so good) any suggestion or idea why not so good?

Thanks.

Answer 1

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

Answer 2

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');
}

Answer 3

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?

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