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:
@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 en un div:
<div class="micapa"> <b>Esto esta escrito con fuente-bold.woff</b> <br/> <b><i>Esto está escrito con fuente-boldoblique.woff</i></b> <br/> <i>Esto está escrito con fuente-oblique.woff</i> <br/> Esto está escrito con fuente.woff </div>
y en el css:
.micapa{ font-family: mifuente; }
¿Pero esto no serviría también para los demás tipos de fuentes eot,svg,ttf?
Cierto María, cuando escribí esta entrada no tenía muy claro como funcionaba lo de las fuentes. Gracias