Fuentes webFuentes webLas 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.
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 aunque sí en la recomendación CSS 3 Fonts (actualmente -enero de 2012- en fase de borrador de trabajo).
   |
@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 requiere que las fuentes estén en el formato EOT (Embedded Open Type), un formato de Microsoft.
   |
@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%. |
Se pueden crear fuentes EOT a partir de fuentes TTF mediante varios programas, por ejemplo:
Para que Firefox, Internet Explorer y Chrome muestren la fuente web es necesario repetir la regla-arroba (poniendo antes la regla-arroba para 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
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 2012) se encuentra en fase de candidata a recomendación.
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.
  |
@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%. |
Nota: Internet Explorer 9 admite fuentes en formato WOFF, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.
Volver al principio de la página
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:
| |
<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:
| |
@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
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.