Archivo por días: 30 diciembre, 2013

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:


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