Cómo usar @font-face para insertar fuentes adicionales

Los navegadores web, por defecto, permiten el uso de una lista determinada de fuentes tipográficas, que se encuentran instaladas en el sistema del cliente. Fuera de éstas, cualquier fuente adicional que utilicemos en una página web puede no estar instalada en el equipo del cliente, y por tanto el navegador sustituirá la fuente desconocida con otra que sí tenga instalada, lo que puede tener malos resultados en el diseño de la web.

Pero existe una forma muy sencilla de definir y utilizar cualquier fuente tipográfica en nuestras páginas web, independientemente de si está o no está instalada en el equipo del cliente.

Para ello utilizamos la propiedad CSS @font-face .

@font-face nos permite utilizar en nuestras páginas web una fuente tipográfica que previamente hayamos subido a nuestro servidor o se encuentre en un servidor externo, con sólo referenciar su ubicación.

Veamos con un ejemplo el uso de @font-face :

@font-face {
font-family: «Kimberley»;
src: url(http://www.miservidor.com/fuentes/kimberle.ttf) format(«truetype»);
}

body {
font-family: «Kimberley»;
}

Como vemos, el uso de @font-face es muy sencillo: primero hemos definido el nombre de la fuente, para seguidamente indicar su ubicación, y por último utilizarla por defecto en <body>.

El uso de @font-face es compatible con todos los navegadores modernos, excepto IE6. Para utilizar @font-face en IE6, tomando como base el ejemplo anterior, haríamos lo siguiente:

<!–[if IE]>
<style type=»text/css» media=»screen»>

@font-face {
font-family: «Kimberley»;
src: url(http://www.miservidor.com/fuentes/kimberle.ttf) format(«truetype»);
}

</style>
<![endif]–>

body {
font-family: «Kimberley»;
}

Como vemos, la sintaxis es similar, sólo que tenemos que agregar algo más de código para que IE6 pueda manejarlo.