Steps to generate @font-face web fonts

This is a web font in action. You can use it on any website.

The first step is to obtain a font file. I like to make my own fonts from scratch. I create hand-made TrueType fonts using TypeTool 3 and a little help from my CINTIQ pen and Adobe Illustrator.
If you prefer to pick a font lovingly designed by a professional designer, there are a gazillion sources of beautiful fonts:
Adobe | Google | fontsquirrel
In order to put a font on a webpage using @font-face, I use the web font generator on fontsquirrel. There are many other web font generators out there:
Transfonter | Creative Fabrica | Everything Fonts
The job of a web font generator is to turn TrueType fonts into the types that the web can understand: TTF, WOFF, EOT, SVG. Any of the above generators will do the trick.
The web font generator on fontsquirrel generates a zip file with TTF, WOFF, EOT, SVG, a CSS file, and a demo file. In this zip file is a snippet of code that looks like this:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I copy the font files (the contents of the zip) to my web server.
I copy the block of code above to my CSS file and modify it to point to where the fonts reside on my web server. I may have to adjust file permissions to make sure everything works.
I then can use the font by adding the "font-family" property anywhere in my stylesheet.
Warning: don't use @font-face too many times, it will slow down your website!

See all my fonts.