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?

possible duplicate of Using custom fonts using css?

animuson
– animuson ♦

2013-03-24 18:41:06 +00:00
Commented Mar 24, 2013 at 18:41 — animuson
– animuson ♦, Commented Mar 24, 2013 at 18:41

dockeryZ · Accepted Answer · 2020-01-19 02:38:02Z

10

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

edited Jan 19, 2020 at 2:38

answered Mar 24, 2013 at 18:40

dockeryZ

4,0011 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruben Martinez Jr. · Accepted Answer · 2013-03-24 18:45:42Z

5

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

answered Mar 24, 2013 at 18:45

Ruben Martinez Jr.

3,1305 gold badges46 silver badges77 bronze badges

Comments

Marcel Gwerder · Accepted Answer · 2013-03-28 00:45:04Z

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.

edited Mar 28, 2013 at 0:45

answered Mar 24, 2013 at 18:44

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to use external font in CSS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related