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 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.

En marzo de 2018 se aprobó la recomendación WOFF File Format 2.0. 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 o en este artículo en lwn.net sobre WOFF2 (13/11/2013).

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.

La regla arroba @font-face

La recomendación CSS 3: Fuentes, publicada en septiembre de 2018, 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("mystery-quest.woff2");
}

p {
  font-family: "Mystery Quest", cursive;
  font-size: 150%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 2 (Web Open Font Format, .woff2), definido en la recomendación WOFF File Format 2.0 de marzo de 2018, que admiten Chrome, Firefox y Edge o, en su defecto, el formato WOFF (.woff) definido en la recomendación WOFF File Format 1.0 de diciembre de 2012, que admite Internet Explorer.

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 ofrece la posibilidad de descargarla en formato TTF, pero a continuación podemos o bien convertir la fuente TTF al formato woff mediante alguna de las páginas web citadas en el apartado Fuentes WOFF, o bien descargarla de Google Fonts utilizando el procedimiento comentado en el apartado Descargar las fuentes de Google Fonts en formato WOFF2.

Las fuentes incluidas en Google Fonts también se encuentran disponibles como repositorio de GitHub: https://github.com/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%;
    }
    
    ERROR (no puede mostrarse el objeto)
    Enlace externo

    Las reglas @import deben escribirse obligatoriamente al principio de la hoja de estilo, como se comenta en el apartado Posición de @import de esta lección.

  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>
    
    p {
      font-family: "Mystery Quest", cursive;
      font-size: 150%;
    }
    
    ERROR (no puede mostrarse el objeto)
    Enlace externo

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 en formato WOFF2

Cuando se descarga una fuente de Google Fonts, tan sólo se incluye la fuente en formato ttf. Para obtenerla en formato woff, 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. Para obtenerla en formato woff2, también puede seguir el procedimiento que se comenta a continuación.

  1. Seleccione la fuente haciendo clic en el símbolo +:

    Google Fonts

  2. Haga clic en la barra negra que se mostrará en la parte inferior de la ventana:

    Google Fonts

  3. Se mostrará el código a insertar como enlace a hoja de estilo. En la pestaña standard o la pestaña @import, seleccione y copie la dirección web http://fonts.googleapis.com/css?family=...:

    Google Fonts

  4. Pegue esa dirección en la barra de dirección del navegador y pulse Intro. Se mostrará un documento de texto en el que se puede encontrar la dirección web de un archivo woff2. Puede haber varias versiones de la misma fuente (en la captura el documento contiene dos enlaces a diferentes versiones de la fuente). Normalmente, la versión a descargar es la versión latin, pero si esa versión no contiene todos los caracteres necesarios (acentos, etc.), a veces es necesario descargar la versión latin-extended u otras. Copie la dirección web de la versión elegida.

    Google Fonts

  5. Pegue esa dirección en la barra de dirección del navegador y pulse Intro. Automáticamente, el navegador le dará la opción de guardar la fuente. Haga clic en Guardar archivo y en Aceptar:

    Google Fonts

  6. En la carpeta de descargas se mostrará el archivo woff2 descargado:

    Google Fonts

  7. Cambie el nombre del fichero al nombre de la fuente para facilitar su uso posterior:

    Google Fonts

Descargar las fuentes de Google Fonts de otras páginas

Existen otras páginas que permiten descargar las fuentes de Google Fonts, pero a veces esas páginas dejan de estar disponibles.

Actualmente (noviembre de 2018), está disponible la web https://canonicalized.com/local-font/.

Posición de @import en la hoja de estilo

La regla @import debe escribirse al principio de la hoja de estilo, sin otras reglas delante, ni siquiera reglas @font-face, como muestran los siguientes ejemplos:

Correcto
@import url("https://fonts.googleapis.com/css?family=Indie+Flower");

@font-face {
font-family: "Mystery Quest";
src: url("mystery-quest.woff2");
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto
@font-face {
font-family: "Mystery Quest";
src: url("mystery-quest.woff2");
}

@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
ERROR (no puede mostrarse el objeto)
Enlace externo