up vote 12 down vote favorite
4
share [g+] share [fb]

On the left is firefox 4, on the right is chrome 12.

On the left is firefox 4, on the right is chrome 12. Is there a way to make chrome render prettier fonts?

The above image was taken on windows xp. Below is another example from windows 7.

enter image description here

link|improve this question
Linux or Windows? – Nicu Zecheru Jul 8 '11 at 17:05
Windows. The screenshot above was taken on windows xp. It looks a bit better on my windows 7 machine, but some sites definitely still suffer. Here's another example: i.imgur.com/zbuUr.png – hughes Jul 8 '11 at 21:52
1  
Are these default OS fonts or embedded fonts? (Such as via TypeKit.com)? – red Jul 12 '11 at 6:17
1  
You know, that's a good question. It's most noticeable on embedded fonts. Web-safe default fonts look fine. Everything on TypeKit.com looks jagged and horrible. – hughes Jul 12 '11 at 13:22
TypeKit rendering looks really really different on different browser \ operating system combinations, sadly. :( – red Jul 12 '11 at 13:32
feedback

6 Answers

up vote 8 down vote accepted
+100

Check ClearType settings - the Chrome screenshot looks like it's being forced to render non-anti-aliased. That will kill just about any web font, since they don't have monochrome hints (for size reasons among other things). I used to see this reported as "IE renders text better", because it ignores your OS-level ClearType settings and

link|improve this answer
Wow, this was the whole problem. I guess Firefox ignores cleartype settings too. Thanks! Enjoy your bounty! – hughes Jul 13 '11 at 12:52
"it ignores your OS-level ClearType settings and" and what? – Oliver Salzburg May 25 at 12:31
feedback
up vote 1 down vote

Do you have GPU Acceleration enabled in Google Chrome? Type about:flags and look for GPU Accelerated Canvas 2D, Disable it if enabled. Fonts on some sites appear really jagged when I browsed with the acceleration enabled.

link|improve this answer
I used to have it enabled myself, but after version 10 the font-rendering took a hit. I'm hoping Google will address the issue at some point. – red Jul 12 '11 at 6:33
It was disabled. I tried temporarily enabling it just to see what would happen, and noticed no difference. – hughes Jul 12 '11 at 13:21
Alright. In case you manage to find what was wrong, remember to update here. – red Jul 12 '11 at 13:31
feedback
up vote 1 down vote

Within Google Chrome click on the Wrench > Options > Under the Hood > [next to Web Content] click Customize Fonts.

Change your settings so that your page looks just like mineMy options screen

Then click the x, and see if your problem is fixed.

If this doesn't fix it, there might be one more thing... but I'll wait until you try this.

link|improve this answer
Already identical: i.imgur.com/zhTBS.png though you'll notice that even comparing our screenshots, the default fonts are very jagged on my machine. – hughes Jul 12 '11 at 19:27
OK... who makes your video card? – wizlog Jul 13 '11 at 4:57
Also... go to google.com/webfonts are all those just as messed up? I know that you went to typekit.com... but this may be different. Try to look through the different filters and see if your problem applies to all of them (ex. is it just serif or...) – wizlog Jul 13 '11 at 5:02
1  
This changes the typefaces (the "fonts"). It has nothing to do with font rendering. – Andres Riofrio Apr 28 at 6:30
feedback
up vote 0 down vote

It looks like the long and hard answer is you can't. There are plenty of discussions and suggestions in Chrome help, but I don't see anything worth suggesting.

The big question is how are you getting it to look so bad?! I'm using Chrome to type in this box... I even zoomed in a whole bunch and I don't see anything like you are. If you still have questions after this you should explain out your configuration to the community.

link|improve this answer
feedback
up vote 0 down vote

Chrome takes the system clearType value for fonts. Looking better in Windows 7 explains that. On a Mac, Anti-aliasing is enabled for all fonts above size 8, I suppose. Try turning on or changing the clearType of your Windows machine

link|improve this answer
feedback
up vote 0 down vote

I had exactly the same issue, rendering webfonts from http://www.google.com/webfonts in chrome. I tried all the suggestions on this and a couple of other sites and none of them worked, eventually I began inspecting the CSS properties of the affected text - it turned out to the the actual font colour that was causing the issue. A title given color:#454545 would render badly, yet the same title given the following: color:#333 worked fine. Thank god for user agent specific style sheets!

link|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.