Prácticas recomendadas para fuentes

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

En este documento, se analizan las prácticas recomendadas de rendimiento para las fuentes. Existen varias formas en las que las fuentes web afectan el rendimiento:

Este documento tiene 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 son recursos importantes. 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 centrarse en garantizar 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 estás seguro de si las fuentes de tu página se solicitan a tiempo, consulta la pestaña Timing en el panel Network de las Herramientas para desarrolladores de Chrome para obtener más información.

La pestaña Timing en Herramientas para desarrolladores

Información sobre @font-face

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

La @font-face declaración es una parte esencial para trabajar con cualquier fuente web. Como mínimo, declara el nombre que se usa para hacer referencia a la fuente y muestra 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 que se solicita una fuente cuando se encuentra una declaración @font-face. Esto es falso. Por sí sola, la declaración @font-face no activa la descarga de fuentes. En cambio, una fuente solo se descarga si el estilo que se usa en la página hace referencia a ella. Por ejemplo:

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

h1 {
  font-family: "Open Sans"
}

En este ejemplo, Open Sans solo se descargaría si la página contuviera un elemento <h1>.

Por lo tanto, cuando pienses en la optimización de fuentes, es importante que les des a las hojas de estilo la misma consideración que a los archivos de fuentes. Cambiar el contenido o la entrega de las hojas de estilo puede tener un impacto significativo en el momento en que llegan las fuentes. Del mismo modo, quitar las CSS no utilizadas 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 si intercalaran las declaraciones de fuentes y otros estilos críticos en el <head> del documento principal en lugar de incluirlos en una hoja de estilo externa. Esto permite que el navegador descubra las declaraciones de fuentes antes, ya que no necesita 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 intercalación de CSS críticas puede ser una técnica más avanzada que no todos los sitios pueden lograr. Los beneficios de rendimiento son claros, pero requiere procesos adicionales y herramientas de compilación para garantizar que las CSS necesarias, y, de manera ideal, solo las CSS críticas, se intercalen 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 externos críticos

Si tu sitio carga fuentes desde un sitio externo, te recomendamos que uses la preconnect sugerencia de recursos para establecer conexiones tempranas con el origen externo. Las sugerencias de recursos deben colocarse en el <head> del documento. La siguiente sugerencia de recursos configura una conexión para cargar la hoja de estilo de la fuente.

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

Para establecer una conexión previa con la conexión que se usa para descargar el archivo de fuente, agrega una sugerencia de recursos preconnect independiente que use el atributo crossorigin. A diferencia de las hojas de estilo, los archivos de fuentes deben enviarse 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 publicar hojas de estilo y fuentes desde 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 se puedan descubrir al principio del proceso de carga de la página, esto se produce a costa de quitar recursos del navegador de la carga de otros recursos.

La intercalación de declaraciones de fuentes y el ajuste de hojas de estilo pueden 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, el uso de preload como estrategia de carga de fuentes también debe usarse 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 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, de lo contrario, el navegador no descubrirá si se necesita la fuente hasta mucho más tarde.

Entrega de fuentes

Una 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 la suficiente anticipación, esto puede ayudar a eliminar los cambios de diseño que resultan del intercambio de fuentes.

Usa fuentes autoalojadas

En teoría, el uso de una fuente autoalojada debería ofrecer un mejor rendimiento, ya que elimina una configuración de conexión externa. En la práctica, las diferencias de rendimiento entre estas dos opciones no son tan claras. Por ejemplo, el Web Almanac descubrió que los sitios que usan fuentes externas tenían una renderización más rápida 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.

Si usas 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 creación de subconjuntos de fuentes y la compresión WOFF2. La cantidad de esfuerzo que se requiere para aplicar estas optimizaciones depende en parte de los idiomas que admite tu sitio. En particular, ten en cuenta que la optimización de fuentes para idiomas CJK puede ser particularmente difícil.

Usa WOFF2

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

Dada la compatibilidad con 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 flujo de trabajo, y también evitará cualquier descarga accidental doble o incorrecta de fuentes. WOFF2 ahora es compatible en todas partes. Por lo tanto, a menos que necesites admitir navegadores muy antiguos, solo usa WOFF2. Si no puedes, considera no publicar ninguna fuente web en esos navegadores más antiguos. Esto no será un problema si tienes una estrategia de resguardo sólida. Los visitantes de navegadores más antiguos verán tus fuentes de resguardo.

Bram Stein, del Web Almanac 2022

Fuentes de subconjuntos

Por lo 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 puedas reducir el tamaño de los archivos de fuentes mediante la creación de subconjuntos de fuentes.

El unicode-range descriptor 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 descarga un archivo de fuente si la página contiene uno o más caracteres que coinciden con el rango de Unicode. unicode-range se usa de uso frecuente para publicar diferentes archivos de fuentes según el idioma que usa el contenido de la página.

unicode-range se usa a menudo junto con la técnica de creación de subconjuntos. Una fuente de subconjunto incluye una porción más pequeña de los glifos que contenía el archivo de fuente original. Por ejemplo, en lugar de publicar todos los caracteres para todos los usuarios, un sitio podría generar fuentes de subconjuntos 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.
  • CJKCJK pueden tener más de 10,000 caracteres.

Quitar 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 cambia al autoalojamiento, esta es una optimización que se puede omitir y generar archivos de fuentes más grandes de forma local.

Puedes crear subconjuntos de fuentes de forma manual si tu proveedor de fuentes lo permite, ya sea con una API (Google Fonts admite esto proporcionando un text parámetro), o editando manualmente los archivos de fuentes y, luego, autoalojándolos. Las herramientas para generar subconjuntos de fuentes incluyen subfont y glyphanger.

Siempre verifica las licencias de fuentes para confirmar que permiten la creación de subconjuntos y el autoalojamiento.

Usa menos fuentes web

La fuente más rápida de publicar es una fuente 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. Por lo general, las fuentes del sistema varían según el sistema operativo y la versión. Debido a que 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, se podría usar una fuente variable con un eje Weight para implementar letras que antes requerían fuentes independientes para claro, normal, negrita y negrita adicional.

No todos se benefician 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 verán la mayor mejora con el uso de fuentes variables son aquellos que usan (y necesitan usar) una variedad de estilos y tamaños de fuentes.

Renderización de fuentes

Cuando se enfrenta a una fuente web que aún no se cargó, el navegador se enfrenta a un dilema: ¿debería 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 bloquean la renderización de texto hasta por 3 segundos si no se cargó la fuente web asociada. Safari bloquea 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 tiene el potencial de afectar el LCP, el FCP y la estabilidad del diseño.

Elige una estrategia font-display adecuada

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

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

Existen 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 100ms 3 segundos
Opcional 100ms 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, la fuente se renderiza en una fuente de resguardo invisible y, por lo tanto, el texto no es visible para el usuario. Si la fuente no está disponible al final del período de bloqueo, se renderiza 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 "intercambia".

Las estrategias 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 molesta que puede ser una fuente que llega tarde cuando se intercambia.

Para la mayoría de los sitios, estas son las tres estrategias más aplicables, según tu prioridad principal:

  • Rendimiento: Usa font-display: optional. Este es el enfoque con el mejor rendimiento: la renderización de texto no se retrasa más de 100 ms y se garantiza que no haya cambios de diseño relacionados con el intercambio de fuentes. La desventaja es que la fuente web no se usará si llega tarde.

  • Muestra texto rápidamente y usa una fuente web: Usa font-display: swap pero asegúrate de entregar la fuente con la suficiente anticipación para que no cause un cambio de diseño. La desventaja de esta opción es el cambio molesto cuando la fuente llega tarde.

  • El texto se muestra en una fuente web: Usa font-display: block, pero asegúrate de entregar la fuente con la suficiente anticipación para minimizar el retraso del texto. Se retrasa la visualización inicial del texto. A pesar de este retraso, aún puede causar un cambio de diseño, ya que el texto se dibuja de forma 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 diferente, por lo que se produce un cambio. Este puede ser un cambio menos molesto que font-display: swap, ya que no se verá que el texto cambie.

También ten en cuenta que estos dos enfoques se pueden combinar. Por ejemplo, usa font-display: swap para la marca y otros elementos de página visualmente distintivos. Usa font-display: optional para las fuentes que se usan en el texto del cuerpo.

Fuentes de íconos

Las estrategias font-display que funcionan bien para las fuentes web convencionales no funcionan tan bien para las fuentes de íconos. Por lo general, la fuente de resguardo para una fuente de íconos se ve muy diferente de la fuente de íconos, y sus caracteres pueden transmitir un significado completamente diferente. Como resultado, es más probable que las fuentes de íconos causen cambios de diseño significativos.

Además, es posible que el uso de una fuente de resguardo no sea práctico. Cuando sea posible, reemplaza las fuentes de íconos por SVG, que también es mejor para la accesibilidad. Por lo general, las versiones más recientes de las fuentes de íconos populares admiten SVG. Para obtener más información sobre el cambio a SVG, consulta la página de Font Awesome sobre SVG Sprites y nuestra Guía de íconos de Material.

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

Para reducir el impacto del CLS, puedes usar los size-adjust atributos.

Conclusión

Las fuentes web siguen siendo un cuello de botella de rendimiento, pero tenemos una variedad cada vez mayor de opciones que nos permiten optimizarlas para reducir este cuello de botella lo más posible.