Poor font rendering for QuickSand (Google font) in Chrome and IE

Question

I have been struggling to get consistent and nice looking fonts across all browsers with the QuickSand Google font. Chrome and IE show very jagged and pixelated edges, especially at smaller font sizes. Zooming the browser will often make the artifacts disappear.

Here is a screenshot comparison of the issue with Firefox, Chrome, & Internet Explorer: https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

Here is a jsfiddle reproducing the issue for experimentation:

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active {
color: white;
display: inline-block;
padding: 19px 10px;
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif;
text-transform: uppercase;}

Answer 1

The problem was due to Google Fonts not implementing all of the font file types. The solution was to use font squirrel web font generator to generate the missing file types and host them myself.

Answer 2

You can't do too much with the font rendering on the browsers. You can try with font-face if that can make it better, but otherwise it can't be changed.

For webkit (Chrome,Safari) you can add:

-webkit-text-stroke: 1px black;

In order to mask the problem a little but the text will become ticker.