The @font-face rule allows authors to specify online fonts to display text on their pages. In other words, you’ll be able to use fonts outside the usual Arial, Verdana, Georgia and the like, even if the end user doesn’t have them resident.

There are a few other things worth mentioning. The rules are unique to CSS3, so only a few of the newest browsers support them. The fonts you use must be made public, so if you use the rule you’re essentially distributing the fonts – not cool. That’s its biggest hurdle right now and may in fact lead to its demise unless someone can figure out how to protect the fonts. I’m not convinced services like Typekit are the answer.

Originally, we had designed a page using some recently purchased H+FJ fonts but quickly realized we couldn’t use the layout without distributing the fonts. Don’t hate the playa, hate the game.

Before you go clicking you’ll need a really modern browser. Firefox works best, not only in the way it renders the actual type but also the way it displays letter spacing. The new Safari and the Opera beta browsers will also render it decently. We could have made the page degrade gracefully for older browsers, but we didn’t. While you can still view the page in older browsers it’s gonna look like it’s 1999.

Update: It seems as though Firefox 3.5 for Vista doesn’t render a few of the fonts well or at all.

view the sample page

Okay, so we won’t be using it anytime soon due to the issues stated above, but it sure does look promising. There’s a good post at craigmod on this subject too if you want to learn a bit more.