CSS 3: Fuentes 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 CSS 2

Tema obsoletoLa recomendación CSS 2 permitía la utilización de fuentes web mediante el uso de la regla-arroba @font-face, pero la regla-arroba @font-face no está incluida en la recomendación CSS 2.1, por lo que el uso de fuentes web en CSS 2 puede considerarse obsoleto.

Fuentes WOFF (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, que aprobó la recomendación WOFF File Format 1.0 en diciembre de 2012.

Actualmente (octubre de 2016) se está preparando la recomendación WOFF File Format 2.0 (artículo en lwn.net sobre WOFF2 13/11/2013). Gracias al nuevo algoritmo de compresión Brotli, esta recomendación consigue reducir el tamaño de las fuentes a la cuarta parte, aumentar la velocidad de descompresión y reducir los requisitos de memoria, como se explica en el WOFF 2.0 Evaluation Report publicado por el W3C en marzo de 2016.

El formato WOFF 2 es mucho mejor que el formato WOFF 1 y servicios como Google Fonts ya sólo ofrecen WOFF 2, pero Internet Explorer 11 no admite WOFF 2, por lo que todavía puede ser necesario seguir usando WOFF 1.

Para crear fuentes WOFF se puede utilizar webs como Font Squirrel o Fontie en la que subiendo una fuente TTF u OTF podemos descargar la misma fuente en los formatos WOFF2, WOFF, EOT y SVG.

Fuentes web en CSS 3

La futura recomendación CSS 3: Fuentes (actualmente -octubre de 2016- en elaboración) permite la utilización de fuentes web mediante el uso de la regla-arroba @font-face, como muestra el ejemplo siguiente:

@font-face {
  font-family: "Mystery Quest";
  src: url("fuentes/mystery-quest.woff");
}

p {
  font-family: "Mystery Quest", cursive;
  font-size: 150%;
}

Esto es un párrafo con fuente web Mystery Quest al 150%.

En la regla @font-face:

Una vez definido el nombre de la fuente, se puede hacer referencia a ella en las propiedades font-family.


La recomendación no impone ningún formato específico para los tipos de letra, pero nombra algunos como posibilidad: woff (WOFF Web Open Font Format, .woff), truetype (TrueType, .ttf), opentype (OpenType, .ttf, .otf), embedded-opentype (Embedded OpenType, .eot), svg (SVG Font, .svg, .svgz).

Entre ellos, se recomienda utilizar el formato WOFF (Web Open Font Format, .woff), definido en la recomendación del W3C WOFF File Format 1.0 de diciembre de 2012, que admiten Firefox, Internet Explorer y Google Chrome.

Google Fonts / Google Fonts API

Google ofrece un servicio de alojamiento de fuentes libres, Google Fonts.

Google Fonts permite descargar las fuentes en formato TTF a nuestro ordenador para utilizarlas por ejemplo en un procesador de textos. Para ello, hay añadir las fuentes deseadas a una colección y descargar la colección completa.

Lo más interesante de Google Fonts 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 genéricas.

Si queremos alojar nosotros las fuentes, Google Fonts no permite descargarlas directamente en formatos distintos a TTF, pero existen páginas que sí permiten hacerlo, como se comenta en el apartado Descargar las fuentes de Google Fonts.

Enlazar las fuentes de Google Fonts

Para utilizar Google Fonts, la documentación oficial propone dos métodos equivalentes, aunque yo recomiendo el primero ya que toda la información se encuentra en la hoja de estilo.

  1. Incluir al principio de la hoja de estilo una regla-arroba @import y la fuente se puede utilizar en la hoja de estilo como una familia más, como muestra el ejemplo siguiente:
    @import url(https://fonts.googleapis.com/css?family=Mystery+Quest);
    
    p {
      font-family: "Mystery Quest", cursive;
      font-size: 150%;
    }
    

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

  2. Incluir en el documento html un enlace como si fuera un enlace a una hoja de estilo y la fuente se puede utilizar en la hoja de estilo como una familia más, como muestra el ejemplo siguiente:
    <head>
     ...
      <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Mystery+Quest" />
     ...
    </head>
    

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

    p {
      font-family: "Mystery Quest", cursive;
      font-size: 150%;
    }
    

Se muestra a continuación cómo encontrar en Google Fonts el código de los ejemplos anteriores:

Nota:

Descargar las fuentes de Google Fonts

Cuando se descarga una fuente de Google Fonts, tan sólo se incluye la fuente en formato ttf. Para obtenerla en formato woff, se puede convertir la fuente ttf en woff utilizando alguna de las aplicaciones web comentadas en el apartado Fuentes WOFF (Web Open Font Format) de esta lección.

Pero existen páginas ajenas a Google que permiten descargar alguna de las fuentes de Google Fonts en formato TTF, WOFF, WOFF2, SVG u OET, por ejemplo http://www.localfont.com/, siguiendo los pasos siguientes:

  1. Abra la página http://www.localfont.com/:

    Google Fonts. Descargar fuente en formato woff

  2. Elija la fuente deseada.

    Google Fonts. Descargar fuente en formato woff

    ¡Atención!En algunos casos y por motivos que desconozco, al elegir la fuente, la página web no se actualiza y no muestra los enlaces de descarga.

  3. Se mostrarán tres iconos que permiten, de izquierda a derecha:
    • descargar un fichero zip con la fuente en todos los formatos disponibles
    • descargar de forma individual la fuente en cada formato disponibles
    • consultar el código CSS para usar la fuente alojada en Google

    Google Fonts. Descargar fuente en formato woff

  4. Si se hace clic en el segundo icono, se muestran los enlaces de descarga de cada formato de fuente:

    Google Fonts. Descargar fuente en formato woff