Fortunately, there are typographers designing fresh new fonts and licensing them with @font-face in mind. Where do you find such fonts? There are a couple of sites that I recommend.

The League of Moveable Type

The League of Moveable Type is dedicated to providing “the most well-made, free & open-source, @font-face ready fonts.” It’s one of my favorite sources for fonts these days, and their collection, though on the small side currently, has only excellent examples.

Font Squirrel

Font Squirrel is a font aggregator, along the lines of DaFont.com, that only lists free fonts available for commercial use, and many that are @font-face ready. They also have a handy generator to convert a TTF or OTF font into the various formats required for the bulletproof @font-face syntax. And they have pre-made “@font-face kits,” too. You can toggle a checkbox near the search bar if you only want to include @font-face ready fonts in the results.

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

Their blog also occasionally links to other open fonts, along with other things of interest to typography nuts.

The current selection is impressive, though there are currently only 14 or so typefaces at this time. I’m particularly a fan of League Gothic and Goudy Bookletter 1911.

Here is an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo">
<style type="text/css">
body {
font-family: 'Cardo', serif;
font-size: 24px;
}
</style>

It’s simple, and it looks like it works cross-browser pretty much. Hopefully we’ll be seeing more supported fonts in the future. And please, don’t abuse Lobster until it becomes the next Comic Sans.

To use a custom font on a web page, you first run a TTF or OTF font file through the generator on the Cufón website (or your own instance of the generator), which will convert the and generate a JavaScript file named after the font.

Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Copperplate_600.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

Easy enough. The only downside is that the text won’t be selectable after the replacement.

You can read more about Cúfon in the documentation.

Fonts are a big part of graphic design, and people who deal with them on a regular basis often become obsessed with typography. There are typography blogs, typography T-shirts… A little crazy isn’t it? I think I’d get some odd looks if I went around wearing an “I heart Helvetica” T-shirt…

Now, let’s get to the font resources. I was browsing through Del.icio.us earlier, and found this post here: 36 Font Resources You Should’ve [sic] in Your Bookmarks. Prepare to lose a few hours downloading new fonts.