How to Fix Google Chrome Font Rendering Issues

by Bob Plankers on September 12, 2011 · 16 comments

in Desktop,General Rambling,How To,System Administration

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:

Chrome-Font-Rendering-Bad_mini        Chrome-Font-Rendering-Good_mini

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.

{ 1 trackback }

Previous post:

Next post: