Prácticas recomendadas para fuentes

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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 está dividido en tres secciones: carga de fuentes, envío de fuentes y renderización de fuentes. En cada sección, se explica cómo funciona ese aspecto particular del ciclo de vida de la fuente y se proporcionan las prácticas recomendadas correspondientes.

Carga de la fuente

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 generalmente se centran 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 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 Herramientas para desarrolladores

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 afecta esto a la carga de fuentes.

La declaración @font-face es una parte esencial de trabajar con cualquier fuente web. Como mínimo, declara el nombre que se usará para hacer referencia a la fuente e 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, solo se descarga una fuente si se hace referencia a ella mediante el estilo 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, al pensar en la optimización de la fuente, es importante considerar las hojas de estilo con la misma consideración que los archivos de fuentes. Cambiar el contenido o la publicación de las hojas de estilo puede tener un impacto significativo en el momento en que llegan las fuentes. Del mismo modo, la eliminación de CSS sin usar y la división de 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ía mucho de integrar declaraciones de fuentes y otros estilos fundamentales 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>

Incorporar 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 de forma correcta y que cualquier CSS adicional se entregue de una manera que no bloquee la renderización.

Conéctate previamente a orígenes críticos de terceros

Si tu sitio carga fuentes de un sitio de terceros, te recomendamos que uses la sugerencia del recurso 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 a continuación configura una conexión para cargar la hoja de estilo de 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 del recurso preconnect, ten en cuenta que un proveedor de fuentes puede entregar hojas de estilo y fuentes de orígenes diferentes. Por ejemplo, así es como se usaría la sugerencia del recurso 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.

Integrar declaraciones de fuentes y ajustar hojas de estilo puede ser un enfoque más eficaz. Estos ajustes se acercan a abordar la causa raíz de las fuentes de detección tardía, en lugar de solo brindar 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 unicode-range y, si se usa con prudencia, solo debe usarse para cargar un único 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

Una entrega más rápida de fuentes genera una representación de texto más veloz. Además, si una fuente se publica con suficiente antelación, esto puede ayudar a eliminar los cambios de diseño resultantes del intercambio de fuentes.

Cómo usar fuentes autoalojadas

En papel, el uso de una fuente autoalojada debería ofrecer un mejor rendimiento, ya que elimina la configuración de conexiones 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 estás considerando usar fuentes autoalojadas, confirma que tu sitio use una red de distribución de contenidos (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 contenidos.

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. El esfuerzo necesario para aplicar estas optimizaciones dependerá de los idiomas que admita tu sitio. En particular, ten en cuenta que optimizar las fuentes para idiomas CJK puede ser particularmente desafiante.

Cómo usar 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 comprime un 30% mejor que WOFF, lo que reduce la cantidad de datos que se descargan y, por lo tanto, el rendimiento es más rápido.

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

De hecho, creemos que también es el momento de proclamar: use solo WOFF2 y olvídese de todo lo demás.

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

Bram Stein, del Almanac Web 2022 .

Fuentes de subconjuntos

En general, los archivos de fuentes incluyen una gran cantidad de glifos para todos los caracteres que admiten. Sin embargo, es posible que no necesites todos los caracteres de tu página y puedes reducir el tamaño de los archivos de fuentes subdividiendo las fuentes.

El descriptor unicode-range en la declaración @font-face 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 fuentes si la página contiene uno o más caracteres que coinciden con el rango de Unicode. Por lo general, unicode-range se usa para entregar diferentes archivos de fuentes según el idioma que use el contenido de la página.

unicode-range a menudo se usa junto con la técnica de subdivisión. Una fuente de subconjunto incluye una parte más pequeña de los glifos que estaban incluidos 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 separados para caracteres latinos y cirílicos. El número de glifos por fuente varía ampliamente: las fuentes latinas generalmente tienen una magnitud de 100 a 1000 glifos por fuente; Las fuentes CJK pueden tener más de 10,000 caracteres. La eliminación de los glifos no utilizados puede reducir significativamente el tamaño de archivo de una fuente.

Algunos proveedores de fuentes pueden proporcionar automáticamente diferentes versiones de archivos de fuentes con diferentes subconjuntos. 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 pasa al alojamiento propio, esta es una optimización que puede pasarse por alto fácilmente y generar archivos de fuentes más grandes a nivel local.

También es posible hacer subconjuntos manualmente si tu proveedor de fuentes lo permite, ya sea a través de una API (Google Fonts lo admite proporcionando un parámetro text) o a través de la edición manual de los archivos de fuentes y, luego, autoalojando. Las herramientas para generar subconjuntos de fuentes 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 que se publicará es aquella 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 utiliza 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 principal.

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 pueda usar una sola fuente variable como reemplazo de varios archivos de fuentes. Las fuentes variables funcionan definiendo un valor "predeterminado" el estilo de fuente y proporcionar "axes" 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 todo el mundo se beneficiará del cambio a las fuentes variables. Las fuentes variables contienen muchos estilos y, por lo general, tienen 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 una fuente web que aún no se cargó, el navegador se enfrenta a un dilema: ¿debe postergar la representación de texto hasta que llegue la fuente web? ¿O debería representar el texto en una fuente de reserva hasta que llegue la fuente web?

Diferentes navegadores manejan esta situación de manera diferente. De forma predeterminada, los navegadores basados en Chromium y Firefox bloquearán la representación de texto durante un máximo de 3 segundos si no se cargó 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 opción puede tener implicaciones significativas: font-display tiene el potencial de afectar la estabilidad del diseño, el LCP y el FCP.

Elige una estrategia de font-display adecuada

font-display informa al navegador cómo debe proceder con la renderización de texto cuando no se carga la fuente web asociada. Se define por tipo de 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 intercambio
Automático Varía según el navegador Varía según el navegador
Bloquear 2-3 segundos Infinito
Cambiar 0ms 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, esta se renderiza en una fuente de resguardo invisible y, por lo tanto, 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 ocurre después del período de bloqueo. Si la fuente web está disponible durante el período de intercambio, se "intercambiará" en el que te etiquetaron.

Las estrategias de font-display reflejan diferentes puntos de vista sobre la compensación entre rendimiento y estética. Por lo tanto, es difícil aplicar un enfoque recomendado, ya que depende de preferencias individuales, de cuán importante es la fuente web para la página y la marca, y lo disconforme que puede ser una fuente tardía cuando se intercambia.

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. Esta es la de mayor “rendimiento” enfoque: la renderización de texto no se retrasa durante más de 100 ms y se garantiza que no se producirán cambios de diseño relacionados con el intercambio de fuentes. Sin embargo, la desventaja es que no se utilizará la fuente web si llega tarde.

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

  • Si la prioridad principal es garantizar que el texto se muestre en una fuente web: Usa font-display: block, pero asegúrate de publicar la fuente con suficiente antelación para minimizar la demora del texto. La desventaja de esto es que se retrasará la visualización inicial del texto. 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 cargue la fuente web, es posible que se necesite más espacio y, por lo tanto, se modifique. Sin embargo, este puede ser un cambio menos molesto 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. usa font-display: optional para las fuentes utilizadas en el texto del cuerpo.

Reducir 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 nueva a nuestro conjunto de herramientas, por lo que actualmente es más avanzada y un poco manual. Sin embargo, definitivamente podrás experimentar y ver las mejoras de las herramientas en el futuro.

Conclusión

Las fuentes web siguen siendo un cuello de botella en el rendimiento, pero tenemos una variedad de opciones en constante crecimiento que nos permite optimizarlas para reducir este cuello de botella lo más posible.