google webfonts looks bad on chrome

Question

I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help. EXAMPLES:

Is there any way i could smooth them / make them look better??

Thanks,

Percuss

@abraham I think the OP wants to know if there is anything he can do to make the font look smoother. – Gramineous

@Gramineous that would be the logical guess but someone could spend an hour researching an answer just to find they answered the wrong one. – Bui

Look at superuser.com/questions/308135/… This seems to be the same problem, with more progress. – Wilen

I made a detailed blog post about this incl. fixes: How to fix the ugly font rendering in Google Chrome – Halves

Answer 1

Personally I would use

http://www.fontsquirrel.com/

It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.

Campania

Font Squirrel gives the same problem as Google Web Fonts. If the fonts aren't hinted correctly, they will only display properly at their core size. OTF features don't work at all. God help you if you want ligatures. – Honeysucker

Answer 2

Font rendering problems are common in GChrome, try changing the order of your @font-face sources... Chrome utilises the .svg file in the @font-face sources, in some reason it doesn´t tolerate .svg being called last in the list

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

If the order @font-face order looks similar then try changing to

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

Shanta