chrome-antialiased-font-fixed

Chrome : webfonts antialiasing Fixed! (Updated)

Chrome rendering engine does not allow antialiasing on fonts. This is pretty annoying, especially as Google provide a service to use webfonts! But, there is a way to fix this!

Update

Update (2014-09-20): Finally, Google fixed this issue and released it with Chrome 37 [source]

The problem

So, when we changed the font on Gizmodo France to “Open Sans“, regular weight was good, but bold render very ugly :
noAA-chrome

So I tried many things found on the net :

font-smoothing

Result :
webkit-font-smoothing_subpixel-antialiased-chrome

Nothing changed.

text-stroke

Result :
-webkit-text-stroke_0_1em

A little better, but this system add a stroke with the specified color to all text block, so links have the same stroke. A solution will be to force stroke color for elements with different font color. VERY ANNOYING!

text-shadow

Result :
text-shadow_0-0-1px-rgba(0-0-0-0_3)

Better. But problem is : this must be Chrome-only, and we have to add this to all CSS selector using a bold font (strong, headers…)! A headache!

The Fix : move svg call

The fix came from http://www.adtrak.co.uk/blog/font-face-chrome-rendering/ who found that, calling the svg version of the webfont before woff resolve it. But his fix bring another problem: now, my Open Sans bold displayed ugly in… Firefox (and certainly in other browsers). So, to fix this:

First, you need to have the font in svg available. in case of Google webfont, as in my project, the thing is Google does not give access to it so I had to have it available on my server.

Then, I put a font-face rule, applying only for Chrome and bold version (normal and italic) to force the use of svg file:

Result :
text-shadow_0-0-1px-rgba(0-0-0-0_3)

As you can see, I did not applied it to regular-weight font, because I prefered the “precise” feeling of it.

Bad behavior

Password input, viewing on iOS < 6, iOS’s password hinting nukes the text in the password field, making it impossible to put in a password.

The better way to manage that is to made input password use regular-weight font, or another system font.

Published by

Constantin Guay

Currently Data Project Manager and Scrum Evangelist at NetMediaEurope, european leader in IT B2B news site (more than 12 million unique visitors per month). Passionate by user experience and data science. Scrum evangelist

3 thoughts on “Chrome : webfonts antialiasing Fixed! (Updated)”

  1. This works, but there are two performance implications:

    1. SVG fonts are generally about 100% larger than WOFF fonts, sometimes over 700% larger.

    2. Chrome will download both the TTF and the SVG fonts, resulting in one extra HTTP request.

    1. You’re right, this fix is good if you want/need to place design above optimization. We urgently need Google to fix that! But maybe they bet on retina like screen developpment and won’t bother fix this.

Leave a Reply

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