Google webfonts render choppy in Chrome on Windows

Question

I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.

What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything.

I've also tried:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

Hoping that either would help the text render more smoothly.

Right now i've run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I've been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: www.symvoli.nl/about

Thanks in advance!

Edit April 11th, 2013:

Chrome 35 Beta seems to have finally solved this issue:

Answer 1

Update August 2014

Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.

Problem

The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.

But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692

Update Oct 2013 (Thanks to @Catch22)

Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

First approach solution:

The Fontspring bulletproof syntax modified to serve the svg first:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

Further reading:

• CSS properties that affect type rendering
• Smoother Web Font Rendering in Chrome for Windows
• How to Bulletproof @font-face Web Fonts

Answer 2

I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:

Essentially, I moved the TTF file into a Mozilla specific section.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}

Answer 3

-webkit-text-stroke: 0.5px;

use it only on large text, since it will affect your page performance.

Answer 4

It could just be the font your using "asap" doesn't render all that well at certain sizes. I changed the size of your h1 from 3.5em to 50px and it looks a little better. May not be the perfect solution but I have noticed that a lot of google webfonts can be unpredictable

Answer 5

I develop in Firefox. My experience is that FF displays ttf fonts very well without any extra rules (beyond the @font-face calling the url for the font file). Chrome, however, is a different story. Even with with the -webkit-font-smoothing: antialiased; rule it still displays any font quite raggedly. Safari doesn't seem to have that problem, so it's not inherently Webkit that can't render a font cleanly, it's a Chrome problem.

I haven't tried adding the -webkit-text-stroke: 0.5px; rule, but will.

Of the answers above I really like Tom Sarduy's answer best. Aside from a good description of the problem, he gives a great @font-face stack to use to cover all the major browsers.

Answer 6

i have tried many ways: -loading the svg with font-face -webkit-font-smoothening ...

after

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

the rotating was smoother but the main problem hasnt gone.

For me the solution was adding:

-webkit-text-stroke: 0.5px;