Prácticas recomendadas para fuentes

Optimiza las fuentes web para las métricas web esenciales.

En este artículo, se analizan las prácticas recomendadas de rendimiento para las fuentes. Las fuentes web influyen en el rendimiento de varias maneras:

Este artículo se divide en tres secciones: carga de fuentes, entrega de fuentes y renderización de fuentes. En cada sección, se explica cómo funciona ese aspecto en particular del ciclo de vida de la fuente y se proporcionan las prácticas recomendadas correspondientes.

Carga de fuentes

Las fuentes suelen ser recursos importantes, ya que sin ellas es posible que el usuario no pueda ver el contenido de la página. Por lo tanto, las prácticas recomendadas para la carga de fuentes suelen enfocarse en asegurarse de que las fuentes se carguen lo antes posible. Se debe tener especial cuidado con las fuentes cargadas desde sitios de terceros, ya que la descarga de estos archivos de fuentes requiere configuraciones de conexión independientes.

Si no sabes con certeza si las fuentes de tu página se solicitan a tiempo, consulta la pestaña Timing en el panel Network en las Herramientas para desarrolladores de Chrome para obtener más información.

Captura de pantalla de la pestaña Timing en DevTools

Conoce @font-face

Antes de analizar las prácticas recomendadas para la carga de fuentes, es importante comprender cómo funciona @font-face y cómo esto afecta la carga de fuentes.

La declaración @font-face es una parte esencial para trabajar con cualquier fuente web. Como mínimo, declara el nombre que se usará para hacer referencia a la fuente y, además, indica la ubicación del archivo de fuente correspondiente.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Un error común es pensar que se solicita una fuente cuando se encuentra una declaración @font-face, lo cual no es cierto. Por sí misma, la declaración @font-face no activa la descarga de fuentes. En cambio, una fuente se descarga solo si se hace referencia a ella con el diseño que se usa en la página. Por ejemplo, de la siguiente manera:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

En otras palabras, en el ejemplo anterior, Open Sans solo se descargaría si la página contenía un elemento <h1>.

Por lo tanto, cuando pienses en la optimización de fuentes, es importante que consideres los diseños de página tanto como los archivos de fuentes. Cambiar el contenido o la entrega de los diseños de página puede tener un impacto significativo en el momento en que llegan las fuentes. De manera similar, quitar el CSS que no se usa y dividir las hojas de estilo puede reducir la cantidad de fuentes que carga una página.

Declaraciones de fuentes intercaladas

La mayoría de los sitios se beneficiarían mucho de intercalar declaraciones de fuentes y otros diseños esenciales en el <head> del documento principal en lugar de incluirlos en una hoja de estilo externa. De esta manera, el navegador puede detectar las declaraciones de fuentes más rápido, ya que no debe esperar a que se descargue la hoja de estilo externa.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

La incorporación de CSS crítico puede ser una técnica más avanzada que no todos los sitios podrán lograr. Los beneficios de rendimiento son claros, pero se requieren procesos adicionales y herramientas de compilación para garantizar que el CSS necesariamente (y, idealmente, solo el crítico) esté insertado correctamente y que cualquier CSS adicional se entregue de una manera que no bloquee la renderización.

Establece una conexión previa con los orígenes de terceros más importantes

Si tu sitio carga fuentes de un sitio de terceros, te recomendamos que uses la sugerencia de recursos preconnect para establecer conexiones anticipadas con el origen de terceros. Las sugerencias de recursos se deben colocar en el <head> del documento. La sugerencia de recursos que aparece a continuación establece una conexión para cargar la hoja de estilo de la fuente.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Para preconectar la conexión que se usa para descargar el archivo de fuente, agrega una sugerencia del recurso preconnect independiente que use el atributo crossorigin. A diferencia de las hojas de estilo, los archivos de fuentes se deben enviar a través de una conexión CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Cuando uses la sugerencia de recursos preconnect, ten en cuenta que un proveedor de fuentes puede entregar hojas de estilo y fuentes de orígenes independientes. Por ejemplo, así se usaría la sugerencia de recursos preconnect para Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Ten cuidado cuando uses preload para cargar fuentes.

Si bien preload es muy eficaz para hacer que las fuentes sean detectables al principio del proceso de carga de la página, esto tiene el costo de quitar recursos del navegador de la carga de otros recursos.

Incorporar declaraciones de fuentes y ajustar los diseños de página puede ser un enfoque más eficaz. Estos ajustes se acercan más a abordar la causa raíz de las fuentes descubiertas tarde, en lugar de solo proporcionar una solución alternativa.

Además, debes usar preload como estrategia de carga de fuentes con cuidado, ya que omite algunas de las estrategias de negociación de contenido integradas del navegador. Por ejemplo, preload ignora las declaraciones de unicode-range y, si se usa con prudencia, solo debe usarse para cargar un solo formato de fuente.

Sin embargo, cuando se usan hojas de estilo externas, la precarga de las fuentes más importantes puede ser muy eficaz, ya que el navegador no descubrirá, de otro modo, si la fuente es necesaria hasta mucho más tarde.

Publicación de fuentes

La entrega de fuentes más rápida genera una renderización de texto más rápida. Además, si una fuente se entrega con suficiente anticipación, esto puede ayudar a eliminar los cambios de diseño que se producen cuando se cambia la fuente.

Cómo usar fuentes alojadas

En teoría, usar una fuente alojada por el usuario debería proporcionar un mejor rendimiento, ya que elimina la configuración de conexión de terceros. Sin embargo, en la práctica, las diferencias de rendimiento entre estas dos opciones son menos claras. Por ejemplo, en el Almanaque Web se descubrió que los sitios que usaban fuentes de terceros se representaban más rápido que las fuentes que usaban fuentes propias.

Si consideras usar fuentes alojadas por ti, confirma que tu sitio use una red de distribución de contenido (CDN) y HTTP/2. Sin el uso de estas tecnologías, es mucho menos probable que las fuentes autoalojadas ofrezcan un mejor rendimiento. Para obtener más información, consulta Redes de distribución de contenido.

Si utilizas una fuente autoalojada, te recomendamos que también apliques algunas de las optimizaciones de archivos de fuentes que los proveedores de fuentes externos suelen proporcionar automáticamente, por ejemplo, la subdivisión de fuentes y la compresión WOFF2. La cantidad de esfuerzo requerida para aplicar estas optimizaciones dependerá en cierta medida de los idiomas que admita tu sitio. En particular, ten en cuenta que optimizar las fuentes para los idiomas CJK puede ser particularmente desafiante.

Usa WOFF2

De las fuentes de fuentes modernas, WOFF2 es la más reciente, tiene la compatibilidad más amplia con los navegadores y ofrece la mejor compresión. Debido a que usa Brotli, WOFF2 se comprime un 30% mejor que WOFF, lo que genera menos datos para descargar y, por lo tanto, un rendimiento más rápido.

Debido a la compatibilidad con los navegadores, los expertos ahora recomiendan usar solo WOFF2:

De hecho, creemos que también es hora de proclamar: usa solo WOFF2 y olvídate de todo lo demás.

Esto simplificará enormemente tu CSS y tu flujo de trabajo, y también evitará descargas de fuentes incorrectas o dobles por accidente. WOFF2 ahora es compatible en todas partes. Por lo tanto, a menos que necesites admitir navegadores muy antiguos, usa WOFF2. Si no puedes, considera no publicar ninguna fuente web en esos navegadores más antiguos. Esto no será un problema si tienes implementada una estrategia de resguardo sólida. Los visitantes que utilicen navegadores anteriores solo verán las fuentes de resguardo.

Bram Stein, del Almanaque de la Web 2022

Cómo subdividir fuentes

Por lo general, los archivos de fuentes incluyen una gran cantidad de glifos para todos los diversos caracteres que admiten. Sin embargo, es posible que no necesites todos los caracteres de tu página y que puedas reducir el tamaño de los archivos de fuentes creando subconjuntos de fuentes.

El descriptor unicode-range en la declaración @font-face le informa al navegador para qué caracteres se puede usar una fuente.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Se descargará un archivo de fuente si la página contiene uno o más caracteres que coincidan con el rango Unicode. Por lo general, unicode-range se usa para entregar diferentes archivos de fuente según el idioma que use el contenido de la página.

unicode-range se usa a menudo junto con la técnica de subconjuntos. Una fuente de subconjunto incluye una porción más pequeña de los glifos que se encontraban en el archivo de fuente original. Por ejemplo, en lugar de proporcionar todos los caracteres a todos los usuarios, un sitio podría generar subconjuntos de fuentes independientes para caracteres latinos y cirílicos. La cantidad de glifos por fuente varía mucho: las fuentes latinas suelen tener entre 100 y 1,000 glifos por fuente; las fuentes CJK pueden tener más de 10,000 caracteres. Quitar los glifos que no se usan puede reducir significativamente el tamaño de archivo de una fuente.

Algunos proveedores de fuentes pueden proporcionar diferentes versiones de archivos de fuentes con diferentes subconjuntos automáticamente. Por ejemplo, Google Fonts lo hace de forma predeterminada:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Cuando se cambia al autoalojamiento, esta es una optimización que se puede pasar por alto fácilmente y generar archivos de fuentes más grandes de forma local.

También es posible crear subconjuntos de fuentes de forma manual si tu proveedor de fuentes lo permite, ya sea a través de una API (Google Fonts admite esto proporcionando un parámetro text) o editando manualmente los archivos de fuentes y, luego, autoalojados. Entre las herramientas para generar subconjuntos de fuentes, se incluyen subfont y glyphanger. Sin embargo, revisa la licencia de las fuentes que usas, permite la subdivisión y el hosting propio.

Usa menos fuentes web

La fuente más rápida para entregar es una que no se solicita en primer lugar. Las fuentes del sistema y las fuentes variables son dos formas de reducir potencialmente la cantidad de fuentes web que se usan en tu sitio.

Una fuente del sistema es la fuente predeterminada que usa la interfaz de usuario del dispositivo de un usuario. Las fuentes del sistema suelen variar según el sistema operativo y la versión. Como la fuente ya está instalada, no es necesario descargarla. Las fuentes del sistema pueden funcionar muy bien para el texto del cuerpo.

Para usar la fuente del sistema en tu CSS, incluye system-ui como la familia de fuentes:

font-family: system-ui

La idea detrás de las fuentes variables es que se puede usar una sola fuente variable como reemplazo de varios archivos de fuentes. Las fuentes variables funcionan definiendo un estilo de fuente "predeterminado" y proporcionando "ejes" para manipular la fuente. Por ejemplo, una fuente variable con un eje Weight podría usarse para implementar letras que antes requerían fuentes separadas para claro, normal, negrita y negrita adicional.

No todos se beneficiarán de cambiar a fuentes variables. Las fuentes variables contienen muchos estilos, por lo que suelen tener tamaños de archivo más grandes que las fuentes individuales no variables que solo contienen un estilo. Los sitios que experimentarán la mayor mejora a partir del uso de fuentes variables son los que usan (y necesitan usar) una variedad de estilos y grosores de fuente.

Renderización de fuentes

Cuando se encuentra con una fuente web que aún no se cargó, el navegador se enfrenta a un dilema: ¿debe esperar a renderizar el texto hasta que llegue la fuente web? ¿O debería renderizar el texto en una fuente de resguardo hasta que llegue la fuente web?

Los diferentes navegadores controlan esta situación de manera diferente. De forma predeterminada, los navegadores basados en Chromium y Firefox bloquearán la renderización de texto durante un máximo de 3 segundos si no se carga la fuente web asociada. Safari bloqueará la renderización de texto de forma indefinida.

Este comportamiento se puede configurar con el atributo font-display. Esta elección puede tener implicaciones significativas: font-display puede afectar la estabilidad del LCP, el FCP y el diseño.

Elige una estrategia font-display adecuada

font-display le informa al navegador cómo debe continuar con la renderización de texto cuando no se cargó la fuente web asociada. Se define por fuente.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

Hay cinco valores posibles para font-display:

Valor Período de bloqueo Período de cambio
Automático Varía según el navegador Varía según el navegador
Bloquear 2-3 segundos Infinito
Cambiar 0 ms Infinito
Resguardo 100 ms 3 segundos
Opcional 100 ms Ninguno
  • Período de bloqueo: El período de bloqueo comienza cuando el navegador solicita una fuente web. Durante el período de bloqueo, si la fuente web no está disponible, se renderiza en una fuente de resguardo invisible, por lo que el usuario no podrá ver el texto. Si la fuente no está disponible al final del período de bloqueo, se renderizará en la fuente de resguardo.
  • Período de intercambio: El período de intercambio se produce después del período de bloqueo. Si la fuente web está disponible durante el período de intercambio, se “intercambiará”.

Las estrategias de font-display reflejan diferentes puntos de vista sobre la compensación entre el rendimiento y la estética. Por lo tanto, es difícil recomendar un enfoque, ya que depende de las preferencias individuales, de la importancia de la fuente web para la página y la marca, y de lo discordante que puede ser una fuente que llega tarde cuando se cambia.

Para la mayoría de los sitios, estas son las tres estrategias más aplicables:

  • Si el rendimiento es una prioridad principal: Usa font-display: optional. Este es el enfoque más "rendimiento": la renderización de texto se retrasa por no más de 100 ms y se garantiza que no habrá cambios de diseño relacionados con el cambio de fuente. Sin embargo, la desventaja es que la fuente web no se usará si llega tarde.

  • Si mostrar el texto rápidamente es una prioridad, pero aún quieres asegurarte de que se use la fuente web, usa font-display: swap, pero asegúrate de entregar la fuente con suficiente anticipación para que no cause un cambio de diseño. La desventaja de esta opción es el cambio brusco cuando la fuente llega tarde.

  • Si tu prioridad es garantizar que el texto se muestre en una fuente web, usa font-display: block, pero asegúrate de entregar la fuente con suficiente anticipación para minimizar la demora del texto. La desventaja de esto es que se retrasará la visualización del texto inicial. Ten en cuenta que, a pesar de esta repetición, puede provocar un cambio de diseño, ya que el texto se dibuja invisible y, por lo tanto, el espacio de la fuente de resguardo se usa para reservar el espacio. Una vez que se carga la fuente web, es posible que se requiera un espacio de diferencia y, por lo tanto, un cambio. Sin embargo, este puede ser un cambio menos brusco que font-display: swap, ya que no se verá que el texto cambie.

Además, ten en cuenta que estos dos enfoques se pueden combinar: por ejemplo, usa font-display: swap para el desarrollo de la marca y otros elementos de página visualmente distintivos, y usa font-display: optional para las fuentes utilizadas en el texto del cuerpo.

Reduce el cambio entre la fuente de resguardo y la fuente web

Para reducir el impacto de CLS, puedes usar los nuevos atributos size-adjust. Para obtener más información, consulta el artículo sobre CSS size-adjust. Esta es una incorporación muy reciente a nuestro conjunto de herramientas, por lo que es más avanzada y un poco manual en este momento. Pero, definitivamente, es una herramienta con la que puedes experimentar y observar mejoras en el futuro.

Conclusión

Las fuentes web siguen siendo un cuello de botella de rendimiento, pero tenemos una gama cada vez mayor de opciones que nos permiten optimizarlas para reducir este cuello de botella tanto como sea posible.