Google Chrome for Windows is terrible at web fonts

Dear Google Chrome: get better at web fonts. Seriously, this is bordering on unacceptable. This is a company that provides the fantastic Google Web Fonts service, and their own browser manages to render fonts worse than any browser I’ve ever used, including ancient IE. That’s right, I said it, on at least this one issue, Chrome is significantly worse than even Internet Explorer. Harsh but true.

The Problem

This is a pretty well documented problem that has been around for years with no apparent effort by the Chrome team to remedy it. The problem is simple: web fonts in Google Chrome render as if they were made out of Legos. The webkit “font-smoothing” CSS property usually has no noticeable effect, and using the wrong value for “text-rendering” can lead to all sorts of incorrect characters. In short, it’s a mess.

Probably the best way to combat this problem is to force Chrome to use an SVG font file instead of a WOFF. I find this kind of funny, considering that the aforementioned Google Web Fonts service dynamically sends a WOFF to all Chrome browsers. The details on how to implement this fix can be found in a few places, but I like the explanation at Fontspring.

Unfortunately, using an SVG file reveals more problems. In an ideal world, every font you use will have separate definition files for bold, italics, book, and any other styles you might want to apply. Since the world of web fonts is far from ideal, often the font you’ll want to use has only a “normal” definition file and the browser has to guess at what bold, italics, etc. should look like. When this happens with an SVG file, Chrome doesn’t even try, instead rendering everything exactly like “normal” text and never applying any font-weight or font-style rules.

Other Options

So if you don’t have definition files for bold and italic, using SVG files is probably not a workable solution. From here the only remaining options are:

  • Give up and let your site look terrible in Chrome
  • Give up stop using web fonts
  • Apply some sort of CSS hack

I opted to go for the CSS hack route, but I tried to minimize the impact by using it exclusively on Chrome for Windows.

The CSS

First I determined which CSS hack worked the best. Using “text-shadow” seemed to be recommended in a few places, but since that requires specifying a color, it’s not a great solution for site-wide use with multiple colors for text and backgrounds.

I eventually settled on using “-webkit-text-stroke” as it could be applied once to the “body” element and would propagate through every child element. Some sources had recommended using a value of .2px or .5px here, but I noticed that had a different impact on varying sizes of text. To keep the impact level the same from headings to paragraphs, I used “em” instead of “px” for my units, which effectivly limited the size of the text-stroke to the size of the text. The resulting rule, in use on this site, is:

This gives web fonts a smoother appearance in Chrome, noticeably improving larger font sizes without making smaller sizes too bold.

The JavaScript

I didn’t want to run this rule all the time, because the fonts looked fine on a Mac, and even in Safari for Windows. In order to limit this style to Chrome for Windows only, I added the following bootstrap-style script to my header:

That line checks to see if the current browser is Chrome, if so it moves on to see if the platform is windows, and then again moves on to add a new style block to the page containing the CSS rule described above.

Overall, this results in a low-impact resolution to Chrome’s web font problems. It’s still far less than ideal, but until the Chrome team gets their act together it’ll have to do.

Tagged with: , ,
Posted in HTML & CSS, JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

*