Reducir el tamaño de la fuente web

Ilya Grigorik

Jeremy Wagner

La tipografía es fundamental para lograr un buen diseño de la marca, la legibilidad y la accesibilidad. Las fuentes web permiten todo lo anterior y mucho más: el texto se puede seleccionar, buscar, acercar y usar con valores altos de PPP, lo que permite una renderización de texto coherente y nítida independientemente del tamaño de la pantalla y la resolución. WebFonts son fundamentales para un buen diseño, UX y rendimiento.

La optimización de fuentes web es una pieza fundamental de la estrategia de rendimiento general. Cada fuente es un recurso adicional, y algunas fuentes pueden bloquear la representación del texto; sin embargo, el hecho de que la página use WebFonts no significa que su renderización sea más lenta. Por el contrario, las fuentes optimizadas, combinadas con una estrategia acertada de carga y aplicación en la página, pueden ayudar a reducir el tamaño total de la página y mejorar los tiempos de representación.

Anatomía de una fuente web

Una fuente web es un conjunto de glifos y cada glifo es una forma vectorial que describe una letra o un símbolo. En consecuencia, el tamaño de un archivo de fuente determinado se determina mediante dos variables simples: la complejidad de las rutas de acceso vectoriales de cada glifo y la cantidad de glifos en una fuente determinada. Por ejemplo, Open Sans, que es una de las WebFonts más populares, contiene 897 glifos, que incluyen caracteres latinos, griegos y cirílicos.

Al seleccionar una fuente, es importante considerar los grupos de caracteres admitidos. Si necesitas localizar el contenido de tu página a varios idiomas, debes usar una fuente que pueda ofrecer una apariencia y una experiencia coherentes a tus usuarios. Por ejemplo, la familia de fuentes Noto de Google busca admitir todos los idiomas del mundo. No obstante, ten en cuenta que el tamaño total del archivo ZIP de Noto, con todos los idiomas incluidos, supera los 1.1 GB.

En esta publicación, descubrirás cómo reducir el tamaño de archivo publicado de tus fuentes web.

Formatos de fuente web

En la actualidad, existen dos formatos de contenedores de fuentes recomendados en la Web:

• EOT
• TTF
• WOFF
• WOFF2

WOFF y WOFF 2.0 cuentan con una amplia compatibilidad y son compatibles con todos los navegadores modernos.

• Proporciona la variante WOFF 2.0 para los navegadores modernos.
• Si es absolutamente necesario, por ejemplo, si aún necesitas admitir Internet Explorer 11, publica el WOFF como resguardo.
• Como alternativa, considera no usar fuentes web para navegadores heredados y recurrir a las fuentes del sistema. Esto también puede tener un mejor rendimiento en dispositivos más antiguos y más restringidos.
• Debido a que WOFF y WOFF 2.0 abarcan todas las bases para los navegadores modernos y heredados que siguen en uso, el uso de EOT y TTF ya no es necesario y puede generar tiempos de descarga de fuentes web más extensos.

Fuentes web y compresión

Tanto WOFF como WOFF 2.0 cuentan con compresión integrada. La compresión interna de WOFF 2.0 usa Brotli y ofrece una compresión hasta un 30% mejor que WOFF. Para obtener más información, consulta el informe de evaluación de WOFF 2.0.

Por último, cabe mencionar que algunos formatos de fuente contienen metadatos adicionales, como información de sugerencia de fuentes y interletraje, que puede no ser necesaria en algunas plataformas, lo que permite optimizar aún más el tamaño de archivo. Por ejemplo, Google Fonts ofrece más de 30 variantes optimizadas para cada fuente, y detecta y entrega automáticamente la variante óptima para cada plataforma y navegador.

Define una familia de fuentes con @font-face

La regla-at @font-face de CSS te permite definir la ubicación de un recurso de fuente específico, sus características de estilo y los puntos de código Unicode para los que se debe usar. Se puede usar una combinación de estas declaraciones @font-face para construir una "familia de fuentes" que el navegador usará para evaluar los recursos de fuente que se deben descargar y aplicar a la página actual.

Considera usar una fuente variable

Las fuentes variables pueden reducir significativamente el tamaño de archivo de tus fuentes en casos en los que necesites múltiples variantes de una fuente. En lugar de tener que cargar los estilos normal y en negrita, además de sus versiones en cursiva, puedes cargar un solo archivo que contenga toda la información. Sin embargo, los tamaños de los archivos de fuente variables serán más grandes que una variante de fuente individual, aunque más pequeños que la combinación de muchas variantes. En lugar de una fuente grande de variables, puede ser mejor entregar primero las variantes de fuente críticas y descargar otras más tarde.

Las fuentes variables ahora son compatibles con todos los navegadores modernos. Obtén más información en Introducción a las fuentes variables en la Web.

Selecciona el formato correcto

Cada declaración @font-face proporciona el nombre de la familia de fuentes, que actúa como un grupo lógico de varias declaraciones, propiedades de fuente, como el estilo, el grosor y la estiramiento, y el descriptor src, que especifica una lista priorizada de ubicaciones para el recurso de fuente.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

En primer lugar, ten en cuenta que los ejemplos anteriores definen una sola familia de Awesome Font con dos estilos (normal y italic), cada uno de los cuales apunta a un conjunto diferente de recursos de fuente. A su vez, cada descriptor src contiene una lista priorizada de variantes de recursos separadas por comas:

• La directiva local() te permite hacer referencia a fuentes instaladas de forma local, cargarlas y usarlas. Si el usuario ya tiene la fuente instalada en su sistema, se omite la red por completo y es el más rápido.
• La directiva url() te permite cargar fuentes externas y pueden contener una sugerencia format() opcional que indique el formato de la fuente a la que se hace referencia en la URL proporcionada.

Nota: A menos que hagas referencia a una de las fuentes predeterminadas del sistema, es poco frecuente que el usuario lo tenga instalada de forma local, especialmente en dispositivos móviles, en los que es imposible “instalar” fuentes adicionales. Incluso si comienzas con una entrada local(), siempre debes proporcionar una lista de entradas url() para aquellas que no la descargaron.

Cuando el navegador determina que la fuente es necesaria, itera por la lista de recursos proporcionada en el orden especificado e intenta cargar el recurso adecuado. Por ejemplo, siguiendo el ejemplo anterior:

1. El navegador realiza un diseño de la página y determina las variantes de fuente necesarias para renderizar el texto especificado en la página. El navegador no descarga las fuentes que no forman parte del Modelo de objetos de CSS (CSSOM) de la página, ya que no son necesarias.
2. Para cada fuente requerida, el navegador comprueba si la fuente está disponible localmente.
3. Si la fuente no está disponible localmente, el navegador itera sobre las definiciones externas:
   • Si hay una sugerencia de formato presente, el navegador comprueba si la admite antes de iniciar la descarga. Si el navegador no admite la sugerencia, avanza a la siguiente.
   • Si no hay sugerencias de formato, el navegador descarga el recurso.

La combinación de directivas locales y externas con sugerencias de formato adecuadas te permite especificar todos los formatos de fuente disponibles y dejar que el navegador haga el resto. El navegador determina qué recursos son necesarios y selecciona el formato óptimo.

Punto clave: Si envías más formatos que solo WOFF 2.0, es importante el orden en el que se especifican las variantes de las fuentes. El navegador selecciona el primer formato compatible. Por lo tanto, si deseas que los navegadores más nuevos usen WOFF 2.0, debes disponer la declaración de WOFF 2.0 por sobre la de WOFF.

Subdivisión de Unicode

Además de las propiedades de la fuente, como el estilo, el grosor y la estiramiento, la regla @font-face te permite definir un conjunto de puntos de código Unicode admitidos por cada recurso. Esto te permite dividir una fuente Unicode grande en subconjuntos más pequeños (por ejemplo, subconjuntos latino, cirílico y griego) y solo descargar los glifos necesarios para representar el texto en una página determinada.

El descriptor unicode-range te permite especificar una lista de valores de rango delimitados por comas, cada uno de los cuales puede tener una de tres formas diferentes:

• Punto de código único (por ejemplo, U+416)
• Intervalo de intervalo (por ejemplo, U+400-4ff): Indica los puntos de código de inicio y fin de un intervalo
• Rango comodín (por ejemplo, U+4??): Los caracteres ? indican cualquier dígito hexadecimal

Por ejemplo, puedes dividir tu familia de Awesome Font en subconjuntos latino y japonés, que el navegador descargará según sea necesario:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Punto clave: La subdivisión del intervalo Unicode es particularmente importante para los idiomas asiáticos, donde la cantidad de glifos es mucho mayor que en los idiomas occidentales y una fuente "completa" típica se mide en megabytes en lugar de decenas de kilobytes.

El uso de subconjuntos del intervalo Unicode y archivos separados para cada variante estilística te permite definir una familia de fuentes compuesta cuya descarga es más rápida y más eficiente. Los visitantes solo descargan las variantes y los subconjuntos que necesitan, y no están obligados a descargar subconjuntos que quizá nunca vean ni usen en la página.

Casi todos los navegadores son compatibles con unicode-range. Para ofrecer compatibilidad con navegadores anteriores, es posible que debas recurrir a la "subdivisión manual". En este caso, debes recurrir a proporcionar un solo recurso de fuente que contenga todos los subconjuntos necesarios y ocultar el resto del navegador. Por ejemplo, si la página solo usa caracteres latinos, puedes eliminar otros glifos y mostrar ese subconjunto específico como recurso independiente.

1. Determina qué subconjuntos se necesitan:
   • Si el navegador admite la subdivisión del intervalo Unicode, seleccionará automáticamente el subconjunto adecuado. La página solo debe proporcionar los archivos del subconjunto y especificar los rangos Unicode apropiados en las reglas @font-face.
   • Si el navegador no admite la subdivisión del intervalo Unicode, la página debe ocultar todos los subconjuntos innecesarios; es decir, el desarrollador debe especificar los subconjuntos necesarios.
2. Genera subconjuntos de fuentes:
   • Usa la herramienta pyftsubset de código abierto para dividir en subconjuntos y optimizar tus fuentes.
   • Algunos servidores de fuentes, como Google Font, se configurarán automáticamente de forma predeterminada.
   • Algunos servicios de fuentes permiten la subdivisión manual mediante parámetros de consulta personalizados, que puedes usar para especificar manualmente el subconjunto necesario para tu página. Consulta la documentación de tu proveedor de fuentes.

Selección y síntesis de fuentes

Cada familia de fuentes puede estar compuesta por múltiples variantes estilísticas (regular, negrita, cursiva) y varios grosores para cada estilo. Cada uno de ellos, a su vez, puede contener formas de glifos muy diferentes; por ejemplo, diferentes espaciados, tamaños o una forma diferente.

En el diagrama anterior, se ilustra una familia de fuentes que ofrece tres grosores de negrita diferentes:

• 400 (normal).
• 700 (negrita).
• 900 (muy negrita).

Todas las demás variantes intermedias (indicadas en gris) se asignan automáticamente a la variante más cercana por el navegador.

Cuando se especifica un espesor para el que no existe una fuente, se utiliza una fuente con un espesor aproximado. En general, los espesores en negrita se asignan a fuentes con espesores más gruesos y los espesores finos se asignan a fuentes con espesores más delgados.

Algoritmo de coincidencia de fuentes de CSS

Se aplica una lógica similar a las variantes de cursiva. El diseñador de fuentes controla las variantes que producirá y tú controlas las que usarás en la página. Debido a que cada variante implica una descarga independiente, se recomienda que el número de variantes sea reducido. Por ejemplo, puedes definir dos variantes en negrita para la familia Awesome Font:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

En el ejemplo anterior, se declara que la familia Awesome Font está compuesta por dos recursos que abarcan el mismo conjunto de glifos latinos (U+000-5FF), pero ofrecen dos "espesores" diferentes: normal (400) y negrita (700). Sin embargo, ¿qué sucede si una de tus reglas CSS especifica un grosor de fuente diferente o establece la propiedad font-style en italic?

• Si no hay una coincidencia de fuente exacta disponible, el navegador usa la coincidencia más cercana.
• Si no se encuentra una coincidencia estilística (por ejemplo, en el ejemplo anterior no se declararon variantes de cursiva), el navegador sintetiza su propia variante de fuente.

Advertencia: Ten en cuenta que los enfoques sintetizados pueden no ser adecuados para alfabetos como el cirílico, en el que las formas cursivas son muy diferentes en términos de forma. Para una fidelidad adecuada en esos alfabetos, usa una fuente cursiva real.

En el ejemplo anterior se ilustra la diferencia entre los resultados de la fuente real frente a la fuente sintetizada para Open Sans. Todas las variantes sintetizadas se generan a partir de una fuente única con un espesor de 400. Como puedes ver, existe una diferencia notoria en los resultados. No se especifican los detalles sobre cómo generar las variantes negrita y oblicua. Por lo tanto, los resultados varían de un navegador a otro y dependen en gran medida de la fuente.

Nota: Para obtener la mejor coherencia y resultados visuales, no dependas de la síntesis de fuentes. En cambio, minimiza la cantidad de variantes de la fuente que usas y especifica sus ubicaciones, de modo que el navegador pueda descargarlas cuando se usen en la página. O bien, elige usar una fuente variable. Dicho esto, en algunos casos una variante sintetizada puede ser una opción viable, pero debes tener cuidado cuando las uses.

Lista de tareas para optimizar el tamaño de fuente web

• Audite y controle el uso de fuentes: No utilice demasiadas fuentes en sus páginas y reduzca al mínimo la cantidad de variantes de cada una. Esto ayuda a ofrecer una experiencia más coherente y rápida para los usuarios.
• Si es posible, evita los formatos heredados: los formatos EOT, TTF y WOFF son más grandes que los de WOFF 2.0. EOT y TTF son formatos estrictamente innecesarios, y WOFF puede ser aceptable si necesitas admitir Internet Explorer 11. Si solo orienta sus anuncios a navegadores modernos, utilizar WOFF 2.0 únicamente es la opción más simple y eficaz.
• Subdivide tus recursos de fuente: Muchas fuentes se pueden dividir en subconjuntos o en varios intervalos de Unicode para proporcionar solo los glifos que requiere una página específica. Esto reduce el tamaño de archivo y mejora la velocidad de descarga del recurso. No obstante, al definir subconjuntos, procura optimizar la reutilización de fuentes. Por ejemplo, no descargues un conjunto de caracteres diferentes pero superpuestos en cada página. Una buena práctica es crear un subconjunto según la tipografía: por ejemplo, latín y cirílico.
• Dar prioridad a local() en tu lista src: Colocar local('Font Name') en primer lugar en tu lista src garantiza que no se realicen solicitudes HTTP para las fuentes que ya están instaladas.
• Usa Lighthouse para probar la compresión de texto.

Efectos en el Largest Contentful Paint (LCP) y el Cambio de diseño acumulado (CLS)

Según el contenido de la página, los nodos de texto pueden considerarse candidatos para el Largest Contentful Paint (LCP). Por lo tanto, es fundamental que te asegures de que las fuentes web sean lo más pequeñas posible siguiendo las sugerencias de este artículo, de modo que tus usuarios vean el texto de tu página lo antes posible.

Si te preocupa que, a pesar de tus esfuerzos de optimización, el texto de la página pueda tardar demasiado en aparecer debido al gran recurso de fuentes web, la propiedad font-display tiene varios parámetros de configuración que pueden ayudarte a evitar texto invisible mientras se descarga una fuente. Sin embargo, usar el valor swap puede provocar cambios de diseño significativos que afecten el Cambio de diseño acumulado (CLS) de tu sitio. Considera usar los valores optional o fallback si es posible.

Si tus fuentes web son cruciales para tu marca y, por extensión, la experiencia del usuario, considera precargar tus fuentes para que el navegador tenga una ventaja al momento de solicitarlas. Esto puede reducir el período de intercambio si usas font-display: swap o el período de bloqueo si no usas font-display.