¿Qué es @font-face?

@font-face es una gran ayuda para todo diseñador, esta regla de CSS nos permite descargar fuentes particulares desde nuestro servidor a nuestra pagina web y mostrarlas a los usuarios aunque estos no tengan la fuente instalada. En otras palabras, ya no tenemos que simplemente utilizar aquellas “web safe” fuentes de siempre, nos da la oportunidad de ser aun mas creativos con el diseño de nuestra pagina web.

¿Como uso @font-face?

En realidad no es tan complicado, lo primero que hay que hacer es hacer una regla de @font-face dándole un nombre a la fuente que queremos usar:

  • font-family: miFuente;

Ahora tenemos que incluir el archivo fuente que debe estar ya en nuestro servidor, y lo llamamos de esta manera:

  • src: url (‘franschi.ttf’)

Si el archivo fuente se encuentra ubicado en otro servidor, entonces tendrás que escribir el URL completo:

  • src: url (‘http://www.mydominio.com/fuente/franschi.ttf’)

Ahora la fuente esta lista para ser implementada en nuestro diseño, el siguiente es un pequeño ejemplo de como utilizarlo:

div
{
font-family: miFuente;
}

Cuando usamos @font-face tenemos que tener la certeza de que nuestra fuente se mostrara en todos los navegadores.  El siguiente syntax nos ayudara a que no tengamos problemas a la hora de llamar nuestra fuente y se pueda mostrar en todos los navegadores.

@font-face{                                        <== regla CSS
font-family: 'franschi';                      <== el nombre de nuestra fuente
    src: url(‘franschi.eot');                  <== .eot (*para IE*)
    src: url('franschi.eot?#iefix') format('embedded-opentype'),                      <== *older IE browsers*
         url('franschi.woff') format('woff'),                       <== .woff (*trabaja bien en FF*)
         url('franschi.ttf') format('truetype'),                    <== .ttf (*trabaja bien en Google Chrome*)
         url('franschi.svg#franschi') format('svg');         <== .svg (*para dispositivos mobiles*)
    font-weight: normal;
    font-style: normal;
}

Si utilizamos este syntax lo más probable es que no tengas ningún error a la hora de usar tu fuente en la web.  Ahora, si no sabes el formato de tu fuente o no sabes como generar las demás extensiones, te dejo con una gran ayuda que es FONTSQUIRREL.  Esta pagina crea WEBFONTS y genera todas las extensiones para tus fuentes, es muy útil y fácil de usar.

fontsquirrel.com

Leave a Reply

Your email address will not be published. Required fields are marked *