I’ve been having a heck of a time with terrible font rendering in Chrome. In fact, it’s been my biggest complaint about that browser. I get fonts with missing pieces, fonts that don’t render completely, text that is completely absent, and text with severely pixelated edges. I don’t mean to be a snob about it, but I look at this thing many hours every day, and I’d like it to work right.
Here’s a severe example. The image on the left is what I saw in Chrome, and the image on the right is what I should have seen when visiting a particular web site:
That’s like WTF levels of crappy, right? It was happening all the time, on all different web sites. Here’s how I fixed it on my Windows 7 hosts, and based on some of my reading in forums and bug reports I suspect it may work on other versions of Windows, too. This is based on Chrome 13.
1. ClearType is a technology in Microsoft Windows to do sub-pixel anti-aliasing of text to smooth the edges of fonts, making them look less jagged. Chrome obeys the system preference and will not use it if it’s disabled. Very polite of it, unlike Internet Explorer which runs with ClearType enabled all the time.
I enabled ClearType with the default settings by going to the Display control panel, choosing “Adjust ClearType text” on the left, and checking the box entitled “Turn on ClearType.” It walks you through a short wizard to tune ClearType, which you should find self-explanatory, like an eye exam. That fixed some of the jaggedness of the text rendering in Chrome for me.
2. In Chrome, I went to the location “about:flags” to look at the settings for GPU acceleration. Graphics Processing Units, or GPUs, have specialized hardware for shading that have enormous floating-point and vector computational power, way beyond what a general purpose CPU has. Applications like Photoshop and Chrome have started to take advantage of that by offloading certain types of work to the GPU. You can see the options in “about:flags” for that.
In my case, “GPU Accelerated Canvas 2D” was enabled in Chrome. I disabled it, pressed the button on the bottom of the page to restart Chrome, and the problem went away.
GPU rendering sounds like a good idea, though, and the graphics card in my desktop should have this capability. The fix? Downloading and installing the latest versions of drivers directly from the video card vendor, probably Intel, ATI, or NVIDIA (if you’re unfamiliar with how to tell what you have go to the “Device Manager” control panel, then expand the “Display adapters” tree). One reboot later I was able to re-enable “GPU Accelerated Canvas 2D” and have it all work correctly.
I don’t know if GPU Accelerated Canvas 2D is on by default or not, if it’s an artifact from previous Chrome beta installations, or if I turned it on sometime in the past. Regardless, if this is the sort of thing that’s plaguing you I’d suggest taking a look. Good luck!
Comments on this entry are closed.
I just started seeing the same problem, so I’m glad I saw this a few days ago! My issue was only resolved by modifying the font setting in Chrome, though.
I remembered seeing those GPU flag options, so I tried checking them. But, it appears that in dev release 16.0.891.0, they’ve modified/renamed the GPU-related flags. The closest option now is “GPU compositing on all pages”, with the description:
“Uses GPU accelerated compositing on all pages, not just those that include GPU-accelerated layers.”
Anyway, I messed around with the various rendering/GPU flags, but the problem still showed up.
I noticed, however, that it only showed up in certain cases – specifically, when rendering Korean language characters. There are only a small set of Windows fonts that can display Korean characters, and my preferred font (Calibri) isn’t one of them. Once I changed to a Korean-compatible font, though, everything started displaying fine.
Hopefully they’ll get all these rendering issues worked out soon …
Mate, i could kiss you. Have had this problem for the last 2 weeks. Seemd to fix itself as soon as i went into about in chrome. Updated to the newest version of chrome itself. Cheers
A quick follow-up to my own comment …
It appears this is a widespread issue, especially for users running the “dev” or “canary” build of Chrome/Chromium. Various comments on Reddit seem to indicate it just showed up in the most recent dev build, but is NOT present in the beta or stable builds. Details of the Chromium bug:
http://code.google.com/p/chromium/issues/detail?id=98026
Maybe it’s just time to step back from the bleeding edge a bit …
mmm, the font smoothing problem is provoking a thread within Google support pages also… http://www.google.com/support/forum/p/Chrome/thread?tid=1152c1339a83de16&hl=en
Came across this article while researching Chrome font issues. Using Chrome 16 the GPU 2D flag is disabled by default and the more serious problems you had seem to have been resolved (though a good idea to keep graphics drivers updated anyway).
The remaining font issues many people have seem to be due to the default Windows font rendering that Chrome still uses – Firefox 4 stopped using it ages ago and even IE9 has given up – about time Google left this archaic rendering behind.
Here we ladies & gents came across this thread their solutions def worked for me: adding this
body
{
-webkit-text-stroke: 1px transparent;
}
https://github.com/h5bp/html5-boilerplate/issues/598
@Manny <- Thanks man, you're awesome… :-)
Hi,
can you tell me where to add
body
{
-webkit-text-stroke: 1px transparent;
}
i am noob >.<
Thank you so very much! I solved my problem by enabling ClearType!
had the same problem since Chrome 17 – disabling and re enabling ClearType fixed it – thanks for the pointer.
Same as LJ said – FIX: !!! Disabling and re-enabling ClearType fixes it !!!
It’s not really a “fix” if your users have to do something in order to see it correctly. It’s something that should be *automatically* done in Chrome to fix the issue – you can’t expect to put something on your website that says “if you’re using Chrome on Windows, follow these steps or this site will look horrible.” Doesn’t cut it.
Thanks a lot for this great fix.
However, in my case, by disabling “GPU Accelerated Canvas 2D” and then reenable it again, the problem is also solved like magic. Sort of a trigger or what? Don’t quite get it.
Hi,
solved my problem too, thank you!
Badly rendered pages in chrome have been bugging me for a while.
Clear type didn’t work for me but Disabling accelerated 2D canvas did.
Great tip.
I haven’t done the latest graphics card patch yet.
Intel 2.4 Ghz dual core, 2 Gb Ram
XP home (5.1 build 2600)
NVidia GeForce 210 driver 6.14.0012.8026
Yep. It’s old and clunky but as long as I can plat Doom on it…