@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

This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.

To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.

IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.

(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:

text-shadow: 0px 0px 1px rgba(0,0,0,0);

but I seriously wouldn't recommend it.)

One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe command-line tool.

Answer 2

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 3

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!

Answer 4

There is also a font called Vegur that looks like Myriad Pro but is legal to embed in a website. Hope that helps!

Answer 5

I've done a little research, and I've found a hack that I think makes a difference. Put this in your CSS with your font variables:

-webkit-transform: rotate(-0.0000000001deg);

As well, I find that a full-on black (#000000) doesn't help matters either. Using a very dark seemed to help me.

Answer 6

This is code im using to fix "Chrome rendering problem":

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) it works for me...FINALLY!

Answer 7

Changing setting in Windows or a browser itself is not a solution. When you use @font-face, you want the font to look nice on every screen in every browser, not just in yours.

The trick with

text-shadow: 0 0 1px rgba(255,255,255,0.1);

or

-webkit-transform: rotate(-0.0000000001deg);

doesn't work anymore in Chrome 16.0.912.63 m, Windows Vista.

I couldn't find a way to overcome this issue though.

Answer 8

-webkit-transform: rotate(-0.0000000001deg);

Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – >Zequez Nov 4 at 15:28

UPDATE: This is working (at least for me) in Chrome 15.0.874.121 m.

IE9 and Firefox shouldn't need it, or be targeted by it since the selector specifies -webkit-.