DesarrolloWeb.com > Manuales > Manual de CSS 3

Introducción a @font-face de CSS

14 de September de 2010

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (9)

Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.

Por Sara Alvarez

Seguir a Gimawari

A la hora de escoger una fuente para usar en una página web, tradicionalmente se encontraba la limitación de que el usuario tuviera ese tipo de letra instalada en su ordenador, porque de no ser así, los textos se mostrarían con otras tipografías, distintas a las que habíamos elegido. Es por ello que el abanico de fuentes que podíamos utilizar, con la garantía que funcionasen bien en la mayoría de los visitantes, estaba bien reducido a las típicas Arial, Verdana, Times New Roman y poco más.

Bien, pues en la actualidad este problema ya esta solucionado y todo gracias a la regla CSS @font-face. Esta regla nos permite definir en nuestra hoja de estilos cualquier tipo de tipografía, independientemente de si el usuario dispone de ella o no y para ello lo único que debe preocuparnos es que este instalada en nuestro servidor. En el presente artículo explicaremos cómo se puede configurar nuestra hoja de estilos CSS para poder utilizar cualquier fuente que nosotros deseemos.

Importar fuentes tipográficas mediante CSS con @font-face

La mencionada regla @font-face nace con CSS 2 pero hasta CSS 3 no empieza a funcionar y prosperar. En un principio sólo funcionaba en IE 5 y únicamente admitía formatos de fuente .eot, pero con el paso del tiempo otros navegadores ampliaron su soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipográficos como son .ttf y .otf y funciona también con los navegadores Opera 10, Firefox 3,1 y por supuesto, todas las versiones superiores a los navegadores ya citados.

Así pues, nada nos impide ya hacer uso de esta @font-face, para poder utilizar cualquier fuente en nuestra web, con la garantía que se verá perfectamente en todos los navegadores más actuales.

Su sintaxis es la siguiente:

@font-face{
   font-family:<nombre_fuente>;
   src: <source>[,<source>]*;
   [font-weight:<weigth>];
   [font-style:<style>];
}

Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos utilizar dicha fuente tan solo tenemos que llamarla con font-family en las reglas de estilo que deseemos.

Debemos tener en cuenta que si no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que tengamos definida en nuestra hoja de estilos.

Nota: No todos los navegadores admiten todos los formatos anteriormente citados.

Firefox 3,6 soporta Opentype, Embedded Opentype y WOFF.
I.E. soporta Embedded Opentype
Opera soporta Truetype, Embedded Opentype y Opentype
Safari 3,1 soporta Truetype, Embedded Opentype y Opentype
Google Chrome soporta Truetype, Embedded Opentype

Si queremos trabajar con fuentes distintas a través de @font-face y nos preocupa la compatibilidad con todos los navegadores, comprobaremos que lo más aconsejable es subir las fuentes con formato .eot, que funciona en todos los navegadores. Esto es debido a que IE tan sólo soporta el formato .eot. Por ello, debemos convertir nuestras fuentes a dicho formato, para lo que podemos utilizar el programa Microsoft Weft, cuyo funcionamiento veremos detalladamente en otro artículo.

Ejemplo de uso de @font-face

A continuación colocamos el código de un ejemplo con dos tipos de fuentes, una con formato .eot y otra con formato .otf. El primero se ven en todos los navegadores y en el segundo IE coge otra letra por defecto ya que no admite el formato .otf.

Código de la hoja de estilos:

@font-face {
   font-family: Vivaldi;
   font-style: normal;
   font-weight: normal;
   src: url(VIVALDI0.eot);
}

@font-face{
   font-family: "gothic";
   font-style: normal;
   font-weight: normal;
   src: url(gothic.otf);
}

H1{
   font-family: "gothic";
}

H2{
   font-family: "Vivaldi";
}

Y a continuación el código HTML para ver el resultado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Prueba con estilos de letra distintos</title>
   <link rel="STYLESHEET" type="text/css" href="estilo-font-face.css">
</head>

<body>

   <h1>Estamos probando la letra Gothic (no se verá en IE)</h1>
   <h2>Aqui la letra Vivaldi</h2>
</body>
</html>

Puedes ver el resultado en una página aparte.