Font Rendering Issue in IE (google web font)

[OP team_NOOB 16]

Hey all,

Hoping someone can shed some light on this issue I'm having.

I'm using some of the new google web fonts which are not rendering correctly in IE and to a degree, FF for Windows.

Here's an example of what I'm referring to:

Any help would be greatly appreciated.

Thanks,

Ben

[+Seahorsepip 435]

Could we get a html link which shows the embedded font so we could take a better look at your problem?

And keep in mind that @font-face is IE9+ if you sue older browsers you need to use a font that is installed by the system or use adobe flash which can embed fonts ;)

[OP team_NOOB 16]

Sorry I should have mentioned that I tried using the Google Web Fonts API too. Same issue - everything looks good in most browsers except IE and to a degree FF (on windows only).

Here's the code, pretty simple: http://jsfiddle.net/GNgbF/

I thought it might have been a problem with the ClearType rendering - but I can't see a solution that can be implemented server-side. Perhaps there might be a jquery work around? Still looking..

Edit: also @fontface does work with versions of IE 6-9 link so it's not an @fontface issue (hence why I tried google web font implementation too)

[+Seahorsepip 435]

You checked their was no difference between the different font type files themself?

That is the only thing I can think about after testing it on some browsers here :/

[Ambroos 802]

Google Web Fonts always gave some issues for me too. It seems that IE still doesn't properly render text that is altered with Javascript after initial rendering...

[OP team_NOOB 16]

Yeah basically it has something to do with the ClearType font rendering. It happens in earlier FF too :(

From all the reading I have done it seems as though nothing can be done from the server-side. The client can change some settings on their machines which addresses the issue, but that's not really a solution.

Thanks for having a look guys :) Might have to make some conditional comments and load some images for the headings..

.

[The_Decryptor 1,088]

Do you have a link to the actual page? The one on jsfiddle renders fine for me (In Firefox and IE9)

[OP team_NOOB 16]

Do you have a link to the actual page? The one on jsfiddle renders fine for me (In Firefox and IE9)

Hey mate - nah I don't. But IE9 should render it fine - I think they corrected the issue. Just IE8 and earlier are affected. What FF version are you running?

Would you mind taking a screen shot?

[The_Decryptor 1,088]

I thought this was a problem in IE9, didn't realise it was IE9 that was rendering it correctly :laugh:

That's Firefox 9 on my system, I've got it all properly configured to it's using DirectWrite like IE9+ does. If it's rendering bad on some systems it'll be because it's using the old GDI font rendering API.

[OP team_NOOB 16]

I thought this was a problem in IE9, didn't realise it was IE9 that was rendering it correctly :laugh:

haha yeah, I probably should have mentioned that - sorry. I ended up going through the whole font list on a windows pc in IE8 to get the best possible looking font and went with the Yanone Kafeetz again. Using that in the logo too but it will do for now.

That's Firefox 9 on my system, I've got it all properly configured to it's using DirectWrite like IE9+ does. If it's rendering bad on some systems it'll be because it's using the old GDI font rendering API.

Ah I haven't tested with FF9 yet. Are they default settings? I will need to run some tests and see what it looks like with all that turned off given that general Australian businesses are going to be pretty behind when it comes to these things.

[The_Decryptor 1,088]

DirectWrite has been the default (when the hardware is capable) since Firefox 4.0, but even if it's off it's going to match Chrome/Opera/Safari/IE8/etc.