Performance. Embedding 18 fonts via CSS would add a lot of weight and the browsers (particularly mobile safari) don't cope too well when you embed too many fonts at once.
(I work at Typekit)
(I work at Typekit)
On the other hand, I suppose most websites only embed one or two unique fonts.
TypeKit tracks how big the font files are. Each font might only be ~20-30K - but that's one weight/style. If you use multiple weights and styles, that's 20-30K per each. It's easy to rack up 3-4 weights, and of course I want italics on some of those == 4 weights times 2 italics times 3 fonts = 20-30k times 24 and now we're talking half a meg or so...
If I'm demoing 18 fonts on a page, even at a single weight and style - that's approaching half a meg right there.
I think using an image is the right call.
But if you want to see TypeKit in action (I get no benefit from pushing them - I'm just a satisfied user), here's a couple of sites I'm using it on:
We were going to use TypeKit but it looked like crap in Safari 5.