@font-face for custom fonts, fonts not smooth in Chrome

This is a known issue that Chrome devs are fixing:

http://code.google.com/p/chromium/issues/detail?id=137692

To work around until then first try:

html {    text-rendering: optimizeLegibility !important;    -webkit-font-smoothing: antialiased !important;}

If this does not work for you, this work-around worked for me (above did not fix windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

it appears rearranging the @font-face CSS rule to allow svg's to appear 'first' fixes this problem.

example:

-before--------------@font-face {font-family: 'chunk-webfont';src: url('../../includes/fonts/chunk-webfont.eot');src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),url('../../includes/fonts/chunk-webfont.woff') format('woff'),url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),url('../../includes/fonts/chunk-webfont.svg') format('svg');font-weight: normal;font-style: normal;}-after--------------@font-face {font-family: 'chunk-webfont';src: url('../../includes/fonts/chunk-webfont.eot');src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),url('../../includes/fonts/chunk-webfont.svg') format('svg'),url('../../includes/fonts/chunk-webfont.woff') format('woff'),url('../../includes/fonts/chunk-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}

Unfortunately, all browsers render fonts differently. And one that looks ok in one might have trouble in another. It's not that easy to find a good font for font-face... if you want pixel perfection you will have to use images.

But not all is lost, here are 20 free fonts (free for commercial use even!) that render quite nicely (I always end up checking this list): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Remember that you can't host paid fonts or you would be distributing them and you could end up in trouble.

You may want to play with optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

And also -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

It might also be worth using font-squirrels font generator to generate your webfonts and css to load in the fonts:http://www.fontsquirrel.com/fontface/generator(though I'm not sure if that will fix your problem or not)