Optimización de fuentes tipográficas en la web

02 de abril de 2021

El principal problema con las fuentes es que cada navegador soporta lo que le da la gana. Esto nos obliga a tener que servir las fuentes en varios formatos, si queremos mantener un diseño consistente entre los distintos navegadores.

Tipos de archivos de fuentes

Vamos a ver un poco resumido algo acerca de los ficheros de fuentes más extendidos.

TTF (TrueType Font) y OTF (Open Type Font)

Ambas son formatos sin compresión con lo que supondrán un mayor peso en la carga de la web.

De las dos, TTF, es el formato con mayor extensión en cuanto al uso. OTF, está prácticamente limitado a Internet Explorer.

Al usar estos tipos, es bueno que los añadamos al la lista de tipos de fichero que se van a comprimir.

SVG

Usada por navegadores Safari de Apple.

WOFF y WOFF2

WOFF, es un contenedor para fuentes ttf y otf. Incorpora la posibilidad de añadir metadatos con, por ejemplo, licencias de uso de la fuentes. Se trata de un formato comprimido con buen soporte en la mayoría los navegadores modernos.

La evolución del formato WOFF, WOFF2, usa Brotli como algoritmo de compresión. Esto reduce el tamaño del fichero hasta un 30% en relación a WOFF. Aunque está menos extendido que WOFF, la mayoría de los usuarios no tendrán problemas para usarlo y el ahorro es importante como para que no dudemos en usarlo.

Podemos ver la diferencia entre el soporte de WOFF y el soporte de WOFF2 en la actualidad.

No vamos a añadir este tipo de archivo a la lista de tipos a comprimir. Ya sea con DEFLATE/Gzip o Brotli, probablemente incrementará el TTFB (ya que el servidor va a intentar comprimirlo) y podría aumentar el tamaño de la descarga.

Fuentes variables

Creo que (y seguro que como yo, muchos) descubrí las fuentes variables gracias a Ana Cirujano, quien lleva ya un tiempo difundiendo las ventajas de usar este tipo de fuentes en muchos de los eventos a los que asiste como ponente. Muy interesante su ponencia de abril de 2020 en Galicia, donde se organizó una meetup sobre fuentes varibles.

Sin duda, elegir una fuente variable va a ahorrar bastantes KB al peso de nuestra web al no tener que descargar un fichero por cada variante de la fuente, con lo que sumará a la hora de conseguir una mejor experiencia de usuario.

Carga de fuentes

Tan importante es elegir los formatos, como optimizar la forma en la que los ponemos a disposición del usuario. Tanto el tiempo de descarga, como qué ocurre mientras de descarga, o que la fuente podría ya estar disponible en el equipo del usuario son cosas a tener en cuenta a la hora de conseguir la optimización web.

En cuanto a cuándo deben descargarse, según la importancia que entiendas que tienen en tu web, podrías precargar las fuentes, o incluso retrasar su carga al final del documento.

Google fonts o similares

Generalmente, con el uso de Google Fonts, lo que hacemos es incorporar un css que incluye los «@font-face» para las fuentes elegidas. Implica que vamos a imponer la descarga de un css y, tras ello, la descarga de las fuentes que en él se definen.

Aquí se pueden emplear cuatro trucos o niveles para incrementar el rendimiento.

  1. Preconecta a los dominios de Google Fonts, o precárgalas si son muy importantes para tu web. Agilizará la obtención del css y fuentes.
  2. Evita insertar las fuentes con @import en tu css. Es más eficiente usar la etiqueta <link> en html.
  3. Incorpora los @font-face de Google Fonts a tu fichero de estilos evitando el @import y el <link>. Así, ahorras una conexión y la descarga del CSS.
  4. Descarga las fuentes y sírvelas desde tu propio dominio. Tendrás que modificar las url de los ficheros de fuentes para que apunten a la ruta desde las que las quieres servir.

Opciones de @font-face

Imaginemos que la fuente que queremos emplear es bastante común, por ejemplo, open-sans. Estaría bien darle la oportunidad al cliente de no descargar la fuente si ya está instalada en su equipo.

Para esto definimos el src: local('la fuente')

@font-face {
    font-family: 'Open Sans';
    font-weight: 500;
    font-style: normal;
    src: local('Open Sans'), local('open-sans'), 
        url('/fonts/open-sans.woff2') format('woff2'), 
        url('/fonts/open-sans.woff') format('woff'), 
        url('/fonts/open-sans.ttf') format('truetype'), 
        url('/fonts/open-sans.svg') format('svg'); 
}
Lenguaje del código: CSS (css)

font-display

  • auto: Usa la preferencia del propio navegador, suele usar block;
  • block: El texto no se muestra hasta que no se descarga la fuente (No causa una buena experiencia para el usuario);
  • swap: el texto se muestra con una fuente alternativa hasta que se descarga la fuente principal;
  • fallback: como swap, pero establece un tiempo en el que, si la fuente no está disponible, la descarta y continúa usando la alternativa;
  • optional: El texto no se muestra hasta que está disponible la fuente, pero no espera a descargarla. En la práctica, solo usará la fuente si ya está disponible;
@font-face {
    font-family: 'Open Sans';
    font-weight: 500;
    font-style: normal;
    font-display: fallback;
    src: local('Open Sans'), local('open-sans'), 
        url('/fonts/open-sans.woff2') format('woff2'), 
        url('/fonts/open-sans.woff') format('woff'), 
        url('/fonts/open-sans.ttf') format('truetype'), 
        url('/fonts/open-sans.svg') format('svg'); 
}
Lenguaje del código: CSS (css)

Si la fuente es muy importante en nuestro diseño, elegiría «swap»; si es relativamente importante, me decantaría por «fallback»; y si necesitamos, ante todo, buen rendimiento, establecería font-display en «optional».

Posiblemente se me han quedado cosas en el tintero, pero creo que estos son los puntos más importantes a la hora de optimizar la web en cuanto al uso de fuentes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.