Search code examples
htmlcssfontsquicksand

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

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;}
Solution

  • 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.