Using downloaded font offline [duplicate]

问题:

This question already has an answer here:

• How to add some non-standard font to a website? 21 answers

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?

回答1:

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