Using downloaded font offline

Question

I have just downloaded a google-font. I want to use it in a specific section of the page. I think I am using the font in an incorrect manner.

.page-header {
    font-family: 'Calligraffitti', cursive;
    src : url('../fonts/Calligraffitti/Calligraffitti-Regular.ttf');
}

If this is incorrect, could you tell me the correct way of using a font that is not installed on a system?

http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website go through this — Dhru 'soni, Jan 22 '15 at 13:39
If you are offline meaning not connected to the internet, then you just need to make sure the path to your local font file is correct — Huangism, Jan 22 '15 at 19:17

score 10 · Accepted Answer · answered Jan 22 '15 at 13:38

10

Add this at the top of your CSS document.

@font-face {
    font-family: Calli;
    src: url('../fonts/Calligraffitti/Calligraffitti-Regular.ttf');
}

You can then use it like this:

.page-header {
    font-family: Calli;
}

answered Jan 22 '15 at 13:38

Isak

and add `font family` for `.page-header` `.page-header {font-family: Calli;}` – Vitorino fernandes Jan 22 '15 at 13:39
If there are multiple fonts to be used, could we add multiple `@font-face` to`css`? – Suhail Gupta Jan 22 '15 at 13:44

1 Answers1