6

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;}
Mark1270287
  • 411
  • 1
  • 4
  • 14

2 Answers2

6

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.

Mark1270287
  • 411
  • 1
  • 4
  • 14
  • Hi Mark, I have the exact same problem - would you mind sharing your solution and the generated files? Thanks! – Nils Feb 18 '14 at 13:37
  • 1
    Spent half a day trying to find a fix for this until I found Mark's solution. Just goto http://www.fontsquirrel.com/tools/webfont-generator and upload any font file you have. Download the webfontkit and in the kit is stylesheet.css. You can refer to the stylesheet.css in your section. I had problems rendering the font in Safari but not Chrome or IE which is why I couldn't find this solution initially. Thanks Mark for posting this. Saved me a ton of grief. – Francis Jan 25 '16 at 16:48
  • 1
    When you download the kit, make sure to choose the Expert radio-button option, which then lets you choose which font formats get downloaded – clayRay Jul 12 '21 at 21:49
1

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.

drip
  • 12,378
  • 2
  • 30
  • 49
  • 1
    Thanks for the help. I ended up looking into the embedded font-face code that the Google Font loads and it turned out it was only linking to the .woff font format. Their implementation of that font did not include a .eot, .ttf, or .svg for supporting all browsers. I used font squirrel to generate the missing files and now it looks much better in Chrome and IE. – Mark1270287 May 06 '13 at 02:53