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;}
Quicksand + Source Sans Pro The Quicksand and Source Sans Pro combination is great for brands that are empowering, flirty, chic, and modern. This recommended combination used to be for Droid Sans.
Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With