How to use external font in CSS?

Question

I have HTML page which uses font Tarminis. This font is installed in my windows fonts folder. So if I open the page with Chrome the page is rendered as expected. However, if I open page with Firefox it is not encoded properly.

All data are here: https://dl.dropbox.com/u/72276354/snowbank.zip

Somehow Firefox (also Opera) cannot encode text int the brackets. So what I wanna do is to put this font in the same folder with my webpage and load it from there. I've been trying to use CSS @font-face feature but with no luck.

So how can I force my web page to use font Tarminis as external and not system font?

Solution 1

It should be as simple as

@font-face {
        font-family: "Name of your font";
        src: url(name-of-font.ttf);
}
* {
    font-family: "Name of your font";
}

Solution 2

To append to what Zane answered, browsers/platforms tend to have compatibility issues when rendering fonts, so the best way to use them is to supply multiple formats, like this:

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

Solution 3

If the license of the font allows web embedding, you can use the fontsquirrel generator to generate all the necessary files which works also for older browsers.

It also gives you a working example with all the necessary css code.