Jump to content



Photo

Font Rendering Issue in IE (google web font)

google web font font redering ie internet explorer font issue font rendering issue

  • Please log in to reply
10 replies to this topic

#1 team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 26 December 2011 - 07:37

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:

fonts.png


Any help would be greatly appreciated.



Thanks,
Ben


#2 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 26 December 2011 - 14:01

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

#3 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 27 December 2011 - 00:06

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)

#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 27 December 2011 - 00:46

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 :/

#5 Ambroos

Ambroos

    Neowinian Senior

  • Tech Issues Solved: 7
  • Joined: 16-January 06
  • Location: Belgium
  • OS: Windows 7 + 8.1
  • Phone: Sony Xperia Z2

Posted 27 December 2011 - 00:47

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

#6 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 27 December 2011 - 01:00

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


.

#7 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 27 December 2011 - 08:21

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

#8 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 27 December 2011 - 10:06

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?

#9 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 27 December 2011 - 11:19

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

Posted Image

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.

#10 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 27 December 2011 - 23:41

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.

#11 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 28 December 2011 - 06:01

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.