We used to do this with tools like SIFR but that came with a big performance penalty - SIFR uses Flash and it takes ages to draw the screen with a lot of SIFR fonts. Now we embed fonts directly inthe website. Here's how you do it.
In the CSS add this, note there are four fonts formats
@font-face
{
font-family: 'BiondiBook';
src: url('fonts/biondi_bk-webfont.eot');
src: url('fonts/biondi_bk-webfont.eot?iefix') format('eot'), url('fonts/biondi_bk-webfont.woff') format('woff'), url('fonts/biondi_bk-webfont.ttf') format('truetype'), url('fonts/biondi_bk-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CopperplateFSBold';
src: url('fonts/Copperplate-Bold-webfont.eot');
src: url('fonts/Copperplate-Bold-webfont.eot?iefix') format('eot'),
url('fonts/Copperplate-Bold-webfont.woff') format('woff'),
url('fonts/Copperplate-Bold-webfont.ttf') format('truetype'),
url('fonts/Copperplate-Bold-webfont.svg#webfontkNkRmcoX') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'VAG Rundschrift';
src: url('fonts/vag_rundschrift_d-webfont.eot?iefix') format('eot'), /* for IE */
url('fonts/vag_rundschrift_d-webfont.woff') format('woff'),
url('fonts/vag_rundschrift_d-webfont.ttf') format('truetype'),
url('fonts/vag_rundschrift_d-webfont.svg#webfontkNkRmcoX') format('svg');
font-weight: normal;
font-style: normal;
}
The most important is "eot" which is for IE. Other browsers support "ttf". "svg" is for iOS. "woff" is for IE9+, Firefox 3.6+ and Chrome 5+.
See http://www.yart.com.au/clients/redheatvests/fonts.css for how this is used.
This seems superior to any other technique in terms of performance and font availability, including Google fonts.
It seems to work everywhere, including IE6.
Note: You may need to buy the license for these fonts, they are not always free.