Como usar fuentes .woff en mi sitio web

Lo primero es ubicar en el sistema de archivos del sitio web los archivos fuente woff. Lo recomendable es crear un directorio fonts dentro de tu hoja de estilos css.

Lo siguiente sería definir en el archivo css las fuentes:

por ejemplo:

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

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

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

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

Por último para aplicar la fuente en código html, en este caso un div:

<div class="micapa">
    <b>Esto esta escrito con fuente-bold.woff</b>
    <br/>
    <b><i>this will be written with fuente-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with fuente-oblique.woff</i>
    <br/>
    this will be written with fuente.woff
</div>

y en el css:

.micapa{
    font-family: mifuente;
}