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 (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 :

So I tried many things found on the net :

-webkit-font-smoothing: subpixel-antialiased !important; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden;

Result :

Nothing changed.

-webkit-text-stroke: .01em #333;

Result :

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: 0 0 1px rgba(0,0,0,.3);

Result :

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 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:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Bold */
    @font-face {
        font-family: 'Open Sans';
        src: url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
	    font-weight: bold;
	    font-weight: 700;
	    font-style: normal;

    /* Bold Italic */
    @font-face {
        font-family: 'Open Sans';
        src: url('fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
        font-weight: bold;
        font-weight: 700;
        font-style: italic;

Result :

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.

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.

      1. I reckon it would be a trivial fix for them. After all, Webkit-based Safari renders the fonts fine.

Comments are closed.