Anti-Alias Fonts in Browsers

HTML & CSS
1

Hello,

I have noticed recently that many web sites are now using anti-aliased large fonts in titles and headings. I can’t think of a single example at the moment, but it appears they are all over now a-days.

Does anyone have any good information on how this is done? Any articles or resources?

What I want to do, is in the most compatible way possible, display anti-alias standard browser-support font, Georgia, Arial, etc. I also noticed many sites appear to have a shadow, or the font layer on top of itself twice to create the shadow effect.

Any direction is appreciated.

Thanks,

Jon

2

This is extremely embarrassing. I can’t recall a name of one piece of work that does this. It’s on the tip of my tongue too…

I believe <canvas>? Check that out on google. This is killing me. I need to start doing this stuff more…

3

Hi,

You are either looking at fonts that have been replaced width sifr, [URL=“http://www.chris-wallace.com/2009/03/23/introducing-cufon-a-font-replacement-solution/”]cufon or using fonts via @[URL=“http://www.fontsquirrel.com/”]font-face.

Or fonts that have had a css3 text shadow added to make the look nicer in browsers that support it.

You can find some other examples here:

4

Thanks Paul O’B. Is there one that’s most compatible between sifr, cufon and @font-face?

5

Ah, Cufon, that was it. Boy do I feel dumb <_<

Was also thinking of siFR. Sigh that’s sad on my part.

Font face would be most compatible though you have to do more work to make it cross browser.

siFR and Cufon wouldn’t work with JS disabled…

6

@font-face is generally the best approach for maximum compatibility.

Font Squirrel has a mega handy @font-face generator gizmo for creating cross-browser compatible @font-face code … http://www.fontsquirrel.com/fontface/generator

Cufon and SiFR have lots of problems, tend to load slowly and don’t work across a broad range of platforms. They tend to be more capable when it comes to rendering specific fonts though and can handle things like text-shadow in browsers which don’t support it.