Text renders awfully in Chrome on a PC, yet fine in all other modern web browsers

A web project I'm currently writing has awful text rendering in Chrome 15.0 on Windows and below, despite text rendering perfectly on all other modern web browsers on both Mac/PC.

Internet Explorer 9:

enter image description here

Chrome 14.0:

enter image description here

The web page is encoded in UTF-8. The font used is Helvetica/Arial/sans-serif. Any suggestions?

PS - wheree isn't a typo.

Update: I've created a test page highlighting the problem, text renders fine in all browsers except Google Chrome on Windows. It's valid HTML/CSS according to the W3C validator.

http://wheree.co.uk/test

Ryan Brodie

Posted 2011-12-13T14:06:43.653

Reputation: 169

How strange. Could we have a look at your HTML and CSS? (Possibly on http://jsfiddle.net/)

– Paul D. Waite – 2011-12-13T14:10:00.020

1This is pretty difficult to analyse without access to the source. – Mankarse – 2011-12-13T14:10:19.977

@ErnestFriedman-Hill: “it's a Chrome-on-Windows installation issue” — huh, really? – Paul D. Waite – 2011-12-13T14:10:43.327

@PaulD.Waite -- yep, I've seen machines where Chrome renders all pages like this; nothing to do with the specific site. Might be a settings thing, I'm not sure; it's obviously nonoptimal if the default settings don't work. – Ernest Friedman-Hill – 2011-12-13T14:13:11.623

@ErnestFriedman-Hill: crikey, you’d think we could figure out decent basic default font rendering in browsers by now. Good spot. – Paul D. Waite – 2011-12-13T14:16:21.747

Added a link to a test page replicating the issue in my description.

http://wheree.co.uk/test

– Ryan Brodie – 2011-12-14T16:51:36.477

Answers

This was a problem worthy of StackOverflow after all. CSS Solution:

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;

Ryan Brodie

Posted 2011-12-13T14:06:43.653

Reputation: 169

This doesn't work for me :S – miguelSantirso – 2013-12-29T19:02:00.220

This sounds like it could be related to either ClearType or GPU rendering.

Here is a helpful article on how to fix font rendering issues.

Tom Stone

Posted 2011-12-13T14:06:43.653

Reputation:

Yes it's clearly something to do with anti-aliasing, or the lack of it, but it happens on all Windows PC's running Chrome I've seen? It's almost as if Chrome disables ClearType by default? The screen shot is taken from browser lab. I'm looking for a scripting based fix, rather user-end solution. – None – 2011-12-13T15:20:07.520

I always fix this problem by adding the following line to my CSS:

/* the line below is a hack to get Chrome to render fonts decently on Windows */
body { -webkit-text-stroke-width: 0.5px; }

Obviously not ideal but it produces pretty good results, should serve until Google finally decides to fix the problem for real.

miguelSantirso

Posted 2011-12-13T14:06:43.653

Reputation: 123