How To Use External Font In Css?

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

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.