How to Get Smooth Anti Alias Fonts with CSS?

When I check this website snorgtees.com I see it has some really smooth heading fonts (look on the left nav area with the headings “T-Shirts” and further down it says “We’re Social”) , at least they look like they are anti aliased to me. How can I get fonts like this in CSS?

Right click on the headings. Choose “Save image as”. Use a bitmap tracing software to make them vectors :slight_smile:

Just kidding. Go to http://cufon.shoqolate.com/generate/ and see for your self.

Looks like they are using Cufon there. But there are better solutions these days, like using real fonts (even if via @font-face — through services like TypeKit).

@font-face is anything but smooth :slight_smile:

Ah yes, sorry. I keep forgetting that some poor souls are still stuck with Windows-based computers. :stuck_out_tongue:

The suckiness of fonts on XP makes me want to burn babies.
Even with Cleartype enabled, embedded fonts look terrible. :frowning:

-webkit-font-smoothing: antialiased;

works wonders for webkit browsers in XP.

It’s enough to make me want to use Cufon or sIFR for headings and just use a boring “web-safe” font for copy text.
The lack of highlight-ability and copy-ability of Cufon also makes me want to burn babies, just slightly uglier ones.

Yeah, I can’t believe it’s taken so long to address this sort of thing. If Apple can produce nice font rendering (and it’s been around a long time), I see no excuse for Windows not dong the same.

Laziness. And a long time monopoly. Mostly laziness, though.