This demonstrates Fertigo, a free font available at MyFonts.com
Custom fonts
Surely one of the thorniest and most-hotly debated 'new' CSS properties comes with the @font-face declaration gaining support in Firefox 3.5, Safari 3.1, IE 9+ and Opera 10+. Designers have been crying out for the chance to use fonts other than the sharply limited list we know are installed by default on users' machines, and while this is an elegant solution, it comes with some non-technical caveats.
The controversy stems over the file formats supported by @font-face. Microsoft have had a working implementation in IE for many years, but IE8 and below restrict use to the .eot filetype, which includes weak DRM intended to prevent unauthorised copying of fonts. Currently the only way I know of to produce an .eot is to use MS's WEFT tool which is both deeply unintuitive and cranky.
The other browsers (IE9+ included) instead support alternative DRM-free file formats: .woff, .ttf and .otf, and it appears that more and more free-for-use fonts in these formats are becoming available for download from the web.
Here I bravely ignore the controversy, and demo the usage of custom fonts in the belief that there is now too much momentum for @font-face to fail again...
Addendum: Google, TypeKit and others provide systems that take most of the compatibility pains out of @font-face.
Using@font-face
Using this declaration is a two-part process: firstly, declare that the font is available to the stylesheet(s) and provide a download URL for whichever filetype you're using, along with a label you'll use to refer to it. Secondly, refer to the font as part of the usual CSS font-family declarations:
The only other issue to be wary of is download time - a font file can easily be 50k or more. This site uses the rather pleasant Graublau Web Bold for headings, by the way.