¿Cómo utilizo las fuentes .woff para mi sitio web?

¿Dónde coloca las fuentes para que CSS pueda acceder a ellas?

Estoy usando fuentes no estándar para el navegador en un archivo .woff. Digamos que su 'fuente impresionante' está almacenada en un archivo 'fuente impresionante.woff'.

Después de la generación de archivos woff, debe definir la familia de fuentes, que se puede usar más adelante en todos sus estilos CSS. A continuación se muestra el código para definir familias de fuentes (para tipos de letra normales, negrita, negrita-cursiva, cursiva). Se supone que hay 4 archivos * .woff (para los tipos de letra mencionados), colocados en el fontssubdirectorio.

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

Después de tener esas definiciones, puede escribir, por ejemplo,

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

En código CSS:

.mydiv {
    font-family: myfont
}

La buena herramienta para la generación de archivos woff, que se pueden incluir en hojas de estilo CSS, se encuentra aquí . No todos los archivos woff funcionan correctamente en las últimas versiones de Firefox y este generador produce fuentes "correctas".

Debes declarar @font-faceasí en tu hoja 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');
}

Ahora, si desea aplicar esta fuente a un párrafo, simplemente úsela así ...

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

Más referencia