Como uso fontes .woff no meu site?

Onde você coloca as fontes para que o CSS possa acessá-las?

Estou usando fontes não padrão para o navegador em um arquivo .woff. Digamos que sua 'fonte incrível' esteja armazenada em um arquivo 'fonte incrível.woff'.

Após a geração dos arquivos woff, você deve definir a família de fontes, que pode ser usada posteriormente em todos os seus estilos css. Abaixo está o código para definir as famílias de fontes (para fontes normais, negrito, negrito-itálico, itálico). Presume-se que existam 4 arquivos * .woff (para as fontes mencionadas), colocados em um fontssubdiretório.

No código CSS:

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

Depois de ter essas definições, você pode simplesmente escrever, por exemplo,

Em código HTML:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

No código CSS:

.mydiv {
    font-family: myfont
}

A boa ferramenta para a geração de arquivos woff, que podem ser incluídos nas folhas de estilo CSS, está localizada aqui . Nem todos os arquivos woff funcionam corretamente nas versões mais recentes do Firefox, e este gerador produz fontes 'corretas'.

Você precisa declarar @font-faceassim em sua folha de estilo

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Agora, se você deseja aplicar esta fonte a um parágrafo, simplesmente use-a assim.

p {
font-family: 'Awesome-Font', Arial;
}

Mais referência