views:

51

answers:

2

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:
Font face on Mac this is the result on Mac with FF, Chrome or Safari (all updated to last version).
Font face on Windows 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?

A: 

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.

bobince
I've tried to enable ClearType on Windows, but the problem persist. I'm checking the GASP table as well, but: do you see other solutions? do you think that using a different font type (woff, eot, svg, etc..) can change something?
notme
I don't think so, no. Converting the outlines to Type 1 format beziers instead of TTF splines can make a difference to the renderer used for non-ClearType font smoothing, but that's a pretty drastic step. Could you put the font up somewhere to check? Oh, another thing: does the jaggy rendering occur *everywhere* you use the font, even in a trivial test page? There are other reasons anti-aliasing can get turned off, in particular when you use an IE `filter` style (typically to reproduce `opacity`).
bobince
The font is Myriad Pro (that is a standard font on a Mac, but not on Win). If you want I can PM you the site I'm developing so that you can see it live.
notme
OK, but bear in mind that the Mac-bundled Myriad is not licensed for web embedding. As I understand it, at the moment, the only legal way to embed Myriad is via Typekit.
bobince