CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxfont-face
Nerimantas Gruodis
Nerimantas Gruodis

Reputation: 66

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 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?

Upvotes: 3

Views: 38120

Answers (3)

dockeryZ
dockeryZ

Reputation: 3981

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";
}

Upvotes: 10

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

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.

Upvotes: 3

Ruben Martinez Jr.
Ruben Martinez Jr.

Reputation: 3110

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 */
}

Upvotes: 5

Related Questions