as a follow up to your references MP,
I recently brought @font-face into use on a site.
I tried the Code Generator at
Font-Squirrel [fontsquirrel.com] to produce the code, as in my reading I discovered IE support issue (suprise!) and that different browsers support different formats (though hopefully all going the way of SVG..hehe)
If you want to know to actually know more about why so much files types and the MS workaround, you could try reading
Bulletproof @font-face syntax by Paul Irish [paulirish.com] but as he helpfully points out the generator does all this for you ;)
You need to make sure that the font you are uploading to the generator is Open Source which of course you can get via google too.. but the added bonus of using the generator is that it gives you the CSS code (including the MS workaround), AND it converts your font file into the other formats required AND then it gives you it all back in a nice zip file ready to extract and use - Then just need to upload the various font files to a directory on your server (they're like images and called in relation to the CSS files so possibly put them in the same directory as you CSS file?) and put the CSS snippet they give you at the top of your CSS File.
The included CSS and font files enable you to get the widest range of support from browsers as is possible at the minute which is not too bad - and the CSS includes a little MS Workaround to allow it to go forward.
tuuni, if you do decide to use this route then you would then list your preferred font at the start of your options, but then offer generic fonts in your font-family rule, just like you normally do, that way Browsers that can't support any of the given file types (@font-face) will degrade to the next font in the list like always..
here's the example CSS I have at the top of my file:
** Don't copy this the numbers will be different depending on which font you upload **
@font-face {
font-family: anivers;
src: url('anivers_31-webfont.eot');
src: local('☺'),
url('anivers_31-webfont.woff') format('woff'),
url('anivers_31-webfont.ttf') format('truetype'),
url('anivers_31-webfont.svg#webfontA1B23CFh') format('svg');
font-weight: normal;
font-style: normal;
}
then for my headings (where I want to use it)
h1, h2, h3, h4, h5, h6 {
font-family: anivers, "trebuchet ms", georgia, helvetica, sans-serif;
}
hope that helps
