Volver al índiceFuentes web

Las fuentes web son las fuentes que pueden mostrarse en el navegador sin necesidad de que el usuario las tenga instaladas en su ordenador ya que se descargan automáticamente.

Fuentes web en CCS 2

En la recomendación CSS 2 se permitía la utilización de fuentes web mediante el uso de la regla-arroba @font-face.

Esta regla-arroba no está incluida en la recomendación CSS 2.1 (actualmente -enero de 2011- en fase de borrador), aunque sí en la recomendación CSS 3 Fonts (actualmente -enero de 2011- en fase de borrador de trabajo).

Correcto en Firefox Incorrecto en Internet Explorer 
@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.ttf")
}

p {
  font-family: Orbitron-medium;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150%.

Internet Explorer no admitía cualquier fuente, sino que las fuentes debían estar en el formato EOT (Embedded Open Type). Se pueden crear fuentes EOT a partir de fuentes TTF mediante varios programas, entre ellos WETF de Microsoft, cuya última versión es actualmente (enero de 2011) WETF 3.2.0 de 14/02/03, o el programa libre ttf2eot, cuya última versión es actualmente (enero de 2011) ttf2eot 0.0.2.2, o mediante páginas web como Font Squirrel en la que subiendo una fuente ttf u otf descargamos la misma fuente en los formatos woff, eot y svg.

Incorrecto en Firefox Correcto en Internet Explorer 
@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.eot")
}

p {
  font-family: Orbitron-medium;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150%.

Para que tanto Firefox como Internet Explorer muestren la fuente web, es necesario repetir la regla-arroba (poniendo antes la regla-arroba para Internet Explorer):

Correcto en Firefox Correcto en Internet Explorer 
@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.eot");
}

@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.ttf");
}


p {
  font-family: Orbitron-medium;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150%.

Volver al principio de la página

Web Open Font Format

En 2009 se desarrolló un formato de fuentes llamado WOFF (Web Open Font Format) pensado para la web. En realidad no se trata de un nuevo formato, puesto que una fuente woff no es más que una fuente TrueType, OpenType, Open Font o SVG comprimida y con metadatos para indicar detalles como el origen de la fuente o la licencia.

En abril de 2010, Mozilla, Microsoft y Opera presentaron este formato al W3C para que se convirtiera en una recomendación, WOFF File Format 1.0, que actualmente (enero de 2011) se encuentra en fase de borrador de trabajo.

Para crear fuentes woff se puede utilizar la web de Font Squirrel en la que subiendo una fuente ttf u otf descargamos la misma fuente en los formatos woff, eot y svg.

Firefox admite fuentes WOFF desde la versión Firefox 3.6:

Correcto en Firefox Incorrecto en Internet Explorer 
@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.woff")
}

p {
  font-family: Orbitron-medium;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150%.

Volver al principio de la página

Google font directory / Google font api

Google ofrece un servicio de alojamiento de fuentes libres, Google font directory, que se pueden descargar de la web del proyecto en Google Code.

Pero lo interesante de Google Font es que las fuentes pueden utilizarse en nuestras páginas web sin necesidad de alojarlas en nuestro propio servidor. Eso tiene la ventaja de que nos ahorramos el tráfico que genera la fuente, pero tiene el inconveniente de que en cualquier momento pueden no estar disponibles. Para intentar evitar este problema conviene indicar varias fuentes, poniendo en último lugar una de las familias predefinidas.

Para utilizar Google font, la documentación oficial dice que hay que incluir en el documento html un enlace como si fuera un enlace a una hoja de estilo y después la fuente se puede utilizar como una familia más, como muestra el ejemplo siguiente:

Correcto en Firefox Incorrecto en Internet Explorer 
<head>
 ...
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Orbitron" />
 ...
</head>

Esto es un párrafo con fuente Orbitron Medium al 150% alojada en Google Fonts.

 
p { 
   font-family: Orbitron, sans-serif;
}

Pero si abrimos con Firefox el enlace a la hoja de estilo de Google Fonts, se puede ver que no es más que una regla-arroba que contiene el enlace a la fuente:

/* contenido de http://fonts.googleapis.com/css?family=Orbitron */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron-Light'), local('Orbitron-Regular'),
       url('http://themes.googleusercontent.com/font?kit=lVErvynhvxLufD6jW6vDo_esZW2xOQ-xsNqO47m55DA') format('truetype');
}

Por lo que podemos escribir directamente el enlace a la fuente y no tener que enlazar a la hoja de estilo:

Correcto en Firefox Incorrecto en Internet Explorer 
@font-face {
  font-family: Orbitron;
  src:url('http://themes.googleusercontent.com/font?kit=lVErvynhvxLufD6jW6vDo_esZW2xOQ-xsNqO47m55DA');
}

p {
  font-family: Orbitron;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150% alojada en Google Fonts.

Volver al principio de la página

Autor: Bartolomé Sintes Marco
Última modificación: 25 de enero de 2011