@font-face anti-aliasing on windows and mac

Question

I've used http://www.fontsquirrel.com/ to create a @font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
this is the result on Mac with FF, Chrome or Safari (all updated to last version).
this is the result on Windows with FF or Chrome.

As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?

Answer 1

I too have been plagued with this on Chrome and I think I've just found the answer!

Chrome didn't like the default fontsquirrel.com generated CSS.

@font-face {     font-family: 'HLC';     src: url('/_styles/hlc/hl-webfont.eot');     src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),          url('/_styles/hlc/hl-webfont.woff') format('woff'),          url('/_styles/hlc/hl-webfont.ttf') format('truetype'),          url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');     font-weight: normal;     font-style: normal; } 

To fix, i moved the SVG line:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg') 

to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first...

/* THIS WORKS FOR ME */ @font-face {     font-family: 'HLC';     src: url('/_styles/hlc/hl-webfont.eot');     src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),          url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),          url('/_styles/hlc/hl-webfont.woff') format('woff'),          url('/_styles/hlc/hl-webfont.ttf') format('truetype');     font-weight: normal;     font-style: normal; } 

Hope it works for you too. Enjoy!

Answer 2

I'm surprised no one mentioned this. Applying a slight -webkit-text-stroke does the trick for me whatever the format (extension) of the font you are using. Some recommend a -webkit-text-stroke: 1px but to me it alters the font look too much (make it too strong). But a 0.5px one makes the stroke almost unnoticeable and it turns on the antialiasing:

-webkit-text-stroke: 0.5px; 

Put it in your css definition for html tag and you're done!