@font-face: Como utilizar cualquier fuente/tipografía en tu web

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Viernes, 05 Agosto 2011 23:56; Escrito por cybnet; Visto: 4843

Hasta ahora, la elección de una fuente para nuestra página web estaba limitada. Más que limitada el problema era que el visitante debía tener la fuente elegida instalada en su ordenador y este hecho hacía que el webmaster tuviera que elegir entre unas cuentas tipografías estándar para tener alta probabilidad de que la mayoría de los usuarios viesen la web como se había diseñado.

CSS3 nos proporciona la regla @font-face con la que podemos usar cualquier fuente que nos imagenemos en la web sin importar si el usuario la tiene o no instalada en su ordenador. En este artículo vamos a ver las principales características de font-face y como usarlo en una web.

En realidad, la regla @font-face nació con CSS2 pero con bastantes limitaciones y sólo algunos pocos navegadores soportaban su uso. En CSS3 las limitaciones practicamente son nulas además de aceptar fuentes en más formatos como .eot, .ttf y .otf.

Definir e importar un tipo de fuente con @font-face

El uso de font-face nos permite definir completamente el tipo de fuente e importar dicha fuente especificando la ubicación del archivo en nuestro servidor. La sintaxis de font-face es:

@font-face{
    font-family:<nombre_de_la_fuente>;
    src: <ruta_en_servidor>[,<ruta_en_servidor>]*;
    [font-weight:<weight>];
    [font-style:<estilo>];
 }

Tras especificar la regla @font-face de la forma puesta arriba, podremos volver a usarla en cualquier parte de nuestra hoja de estilo css utilizando font-family.

Nota: Si la fuente no se encuentra en nuestro servidor en la ubicación especificada se tomará la siguiente fuente definida en el css de la página. El formato aconsejable es .eot para asegurar la máxima compatibilidad con navegadores; si no dispones de la funete en formato .eot puedes convertilo utilizando cualquiera de las múltiples opciones gratuitas que puedes encontrar en la red.

Ejemplo de como usar @font-face

Vamos a ver un simple ejemplo en el que se importan dos fuentes diferentes y cada una de ellas será usada en dos clases de párrafos diferentes. En estos ejemplos los archivos de las fuentes se encuentran en el mismo directorio que el archivo css (también se puede usar ubicación con url absoluta como src:(http://www.dominio.com/ruta/fuente.eot ... ).

El archivo de la hoja de estilos css:

@font-face {
    font-family: 'Vivaldi';
    font-style: normal;
    font-weight: normal;
    src: url(VIVALDI0.eot);
 }
@font-face { 
    font-family: 'Titillium Maps';
    font-style: normal;
    font-weight: normal;
    src: url(TitilliumMaps29L002.eot);
 } 
p.vivaldi { 
   font-family: "Vivaldi"; 
} 
p.titillium { 
  font-family:"Titillium Maps"; 
}

El código html:

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

<html>

<head>

   <title>Ejemplo de uso de font-face con varios tipos de fuentes</title>

   <link rel="stylesheet" type="text/css" href="/hoja-estilo.css">

</head>

<body>

   <p class="vivaldi">Párrafo con la fuente Vivaldi</p>

   <p class="titillium">Párrafo con la fuente Titillium Maps</p>

</body>

</html>

Nota: si la fuente tiene diferentes formatos se puede especificar el formato deseado del siguiente modo:

@font-face{ 
   font-family: 'Titillium Maps';
   font-style: normal;
   font-weight: normal;
   src: url(TitilliumMaps29L002.eot) format("opentype"); //si deseamos opentype
 }

+1 -1 Reportar