Este artículo analiza las mejores prácticas de rendimiento para las fuentes de cara a las Core Web Vitals, ya que hay muchas formas en las que las fuentes web afectan el rendimiento.

De forma breve, la velocidad de carga se ve afectada por las fuentes de 2 modos:

  • Representación de texto retrasada: Si no se ha cargado una fuente web, los navegadores suelen retrasar la representación de texto. En muchas situaciones, esto retrasa First Contentful Paint (FCP) y, en algunas situaciones, también retrasa la pintura con contenido más grande (LCP).
  • Cambios en el diseño: La práctica del intercambio de fuentes tiene el potencial de provocar cambios en el diseño (CLS). Estos cambios de diseño ocurren cuando una fuente web y su fuente alternativa ocupan diferentes cantidades de espacio en la página.

Este post se divide en tres secciones: carga de fuentes, entrega de fuentes y representación de fuentes.

Cada sección explica cómo funciona ese aspecto particular del ciclo de vida de la fuente y proporciona las mejores prácticas correspondientes que afectan, no debemos olvidar, al rendimiento y velocidad de carga de la web, a las señales Core web vitals y, por lo tanto, al posicionamiento web.

Cómo se cargan las fuente

Antes de sumergirse en las mejores optimizar la carga de fuentes, es importante comprender cómo funciona @font-face, y cómo esto determina la carga de fuentes.

La declaración @font-facees una parte esencial para trabajar con cualquier fuente en diseño web. Como mínimo, declara el nombre que se utilizará para referirse a la fuente e indica la ubicación del archivo del tipo de letra correspondiente.

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

Un error común es pensar que se carga una fuente cuando @font-facese encuentra esta declaración; lo cual no es cierto.

Por sí misma, la declaración @font-faceno activa la descarga de fuentes. Al contrario, una fuente se descarga solo si se hace referencia a ella mediante el estilo que se usa en la página.

Por ejemplo, así:

@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 Sanssolo se descargaría si la página contuviera un elemento <h1>.

Otras formas de cargar una fuente son la directiva preload de recursos y la API de carga de fuentes.

Por lo tanto, al pensar en la optimización de fuentes, es importante darle a las hojas de estilo la misma consideración que a los propios archivos de fuentes. Cambiar el contenido o la entrega de hojas de estilo puede tener un impacto significativo en la llegada de las fuentes.

De manera similar, eliminar CSS no utilizado y dividir hojas de estilo puede reducir la cantidad de fuentes cargadas por una página.

Mejores prácticas al cargar fonts

Las fuentes suelen ser recursos importantes, ya que sin ellas el usuario no podría ver el contenido de la página. Por lo tanto, las mejores prácticas para la carga de fuentes generalmente se enfocan en asegurarse de que las fuentes se carguen lo antes posible.

Se debe prestar especial atención a 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á seguro de si las fuentes de su página se solicitan a tiempo, consulte la pestaña Tiempo dentro del panel Red en Chrome DevTools para obtener más información.

Optimizar la carga de fuentes web

Declara las fuentes en línea

La mayoría de los sitios se beneficiarían enormemente de la inclusión de 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 el navegador 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";

    }
  </style>
</head>

No se recomienda incluir los archivos de fuentes en sí. Es probable que la inserción de grandes recursos, como las fuentes, retrase la entrega del documento principal y, con ello, el descubrimiento de otros recursos.

Preconecta a orígenes críticos de terceros

Si su sitio carga fuentes de un sitio de terceros, se recomienda encarecidamente que utilice la directiva preconnectde recursos para establecer una conexión temprana con el origen de terceros. Las sugerencias de recursos deben colocarse en <head>del documento.

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

Google Fonts ofrece la opción de cargar fuentes mediante <link>etiquetas o una declaración @import. La etiqueta <link>incluye una sugerencia preconnectpara el recurso y, por lo tanto, probablemente resultará en una entrega de la hoja de estilo más rápida que con la versión @import.

Los <link>deben colocarse lo antes posible en el documento HTML.

Evite el uso de «preload» para cargar fuentes

Parece confuso pero, en términos generales, con preloadevitará el uso de la sugerencia de recursos para cargar fuentes, y aunque preloades muy eficaz para hacer que las fuentes sean detectables al principio del proceso de carga de la página, esto tiene el costo al quitar recursos del navegador de la carga de otros elementos y recursos.

En la mayoría de los escenarios, insertar declaraciones de fuentes y ajustar hojas de estilo es un enfoque más eficaz.

Estos ajustes se acercan más a abordar la causa principal de las fuentes descubiertas tardíamente, en lugar de simplemente proporcionar una solución alternativa.

Además, el uso preloadcomo estrategia de carga de fuentes también debe usarse con cuidado, ya que evita algunas de las estrategias de negociación de contenido integradas en el navegador.

Por ejemplo, preloadignora las declaraciones unicode-rangey, si se usa con prudencia, solo debe usarse para cargar un único formato de fuente.

Cómo acelerar la entrega de la fuente

La entrega de fuentes más rápida produce una representación de texto más rápida. Además, si una fuente se entrega con la suficiente antelación, esto puede ayudar a eliminar los cambios de diseño resultantes (CLS) del intercambio de fuentes.

Alojar las fuentes localmente

Sobre el papel, el uso de una fuente alojada en el propio host de la web debería ofrecer un mejor rendimiento, ya que elimina una conexión y descarga desde terceros. Sin embargo, en la práctica, las diferencias de rendimiento entre estas dos opciones son menos claras: por ejemplo, un host de bajo rendimiento, con alta latencia, o sin HTTP/2 puede representar las fuentes de manera más lenta que alojadas en un cdn potente.

Si está considerando utilizar fuentes autohospedadas, confirme que su sitio utiliza una hosting de rápida respuesta, si es posible con una red de entrega de contenido (CDN) y con HTTP/2.

Sin el uso de estas tecnologías, es mucho menos probable que las fuentes autohospedadas ofrezcan un mejor rendimiento.

Si no está seguro de si el uso de fuentes autohospedadas ofrecerá un mejor rendimiento, intente entregar un archivo de fuente desde sus propios servidores y compare el tiempo de transferencia (incluida la configuración de la conexión) con el de una fuente de terceros. Si tiene servidores lentos, no use una CDN o no use HTTP/2, es menos probable que la fuente autohospedada tenga un mejor rendimiento.

Si utiliza fuentes alojadas en su propio servidor, se recomienda que también aplique algunas de las optimizaciones de archivos de fuentes que los proveedores de fuentes de terceros suelen proporcionar automáticamente, por ejemplo, subconjuntos específicos de fuentes y compresión WOFF2.

La cantidad de esfuerzo requerido para aplicar estas optimizaciones dependerá en cierta medida de los idiomas que admita su sitio.

Por ejemplo, tenga en cuenta que optimizar las fuentes para los caracteres CJK puede resultar particularmente complicado.

Rango Unicode y subconjunto de fuentes: A menudo @font-face se usa junto con el descriptor unicode-range. Este unicode-rangeinforma al navegador para qué caracteres se puede utilizar con una fuente determinada.

@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 coinciden con el rango Unicode. Este parámetro unicode-rangese usa normalmente para servir diferentes archivos de fuentes dependiendo del idioma usado según el contenido de la página.

unicode-rangese utiliza a menudo junto con la técnica de subconjunto. Una fuente de subconjunto incluye una porción más pequeña de los glifos (es decir, caracteres) que estaban contenidos en el archivo de fuente original.

Por ejemplo, en lugar de ofrecer todos los caracteres a todos los usuarios, un sitio puede generar subconjuntos de fuentes independientes para caracteres latinos y cirílicos.

Buenas prácticas sobre le uso de fuentes en diseño web

El número de glifos por fuente varía enormemente: las fuentes latinas suelen tener una magnitud de 100 a 1000 glifos por fuente; Las fuentes CJK pueden tener más de 10,000 caracteres. La eliminación de glifos no utilizados puede reducir significativamente el tamaño de una fuente.

Las herramientas para generar subconjuntos de fuentes incluyen subfont y glyphanger.

Para obtener información sobre cómo Google Fonts implementa los subconjuntos de API de Google Fonts, consulte este repositorio.

WOFF2: De las fuentes modernas, WOFF2 es la más nueva, tiene el mayor soporte de navegador y ofrece la mejor compresión. Debido a que usa Brotli, WOFF2 comprime un 30% mejor que WOFF.

Utilizar menos fuentes web

La fuente más rápida de entregar 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 utilizadas en su sitio.

Una fuente del sistema es la fuente predeterminada utilizada por la interfaz de usuario del dispositivo de un usuario. Las fuentes del sistema suelen variar 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 particularmente bien para el texto del cuerpo.

Para usar la fuente del sistema en su CSS, enumere system-uicomo la familia de fuentes:

font-family: system-ui

La idea detrás de las fuentes variables es que una sola fuente variable se puede utilizar 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 puede usar Weightcon un eje para implementar letras que antes requerían fuentes separadas para claro, regular, negrita y extra negrita.

A menudo nos referimos a «Times New Roman» y «Helvetica» como fuentes. Sin embargo, técnicamente hablando, se trata de familias de fuentes.

Una familia se compone de estilos, que son variaciones particulares del tipo de letra (por ejemplo, cursiva clara, media o negrita).

Un archivo de fuente contiene un solo estilo a menos que sea una fuente variable. Un tipo de letra es el diseño subyacente, que puede expresarse como fuentes digitales y en tipo físico, como bloques de madera tallados o metal.

No todo el mundo se beneficiará 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 pesos de fuente.

Representación de fuente según el navegador web

Cuando se enfrenta a una fuente web que aún no se ha cargado, el navegador se enfrenta a un dilema:

  1. ¿Debería posponer la representación del texto hasta que haya llegado la fuente web?
  2. ¿O debería representar el texto en una fuente alternativa hasta que llegue la fuente web?

Los diferentes navegadores manejan este escenario de manera diferente. De forma predeterminada, los navegadores basados en Chromium y Firefox bloquearán la representación de texto hasta 3 segundos si la fuente web asociada no se ha cargado; mientras que Safari bloqueará la representación de texto de forma indefinida.

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

Elija una estrategia de font-displayadecuada

font-displayinforma al navegador cómo debe proceder con la representación del texto cuando la fuente web asociada no se ha cargado de esta manera:

@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
Auto Varía según el navegador Varía según el navegador
Cuadra 3 segundos Infinito
Intercambio 0 ms Infinito
Retroceder 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, la fuente se representa en una fuente alternativa invisible y, por lo tanto, el texto no será visible para el usuario. Si la fuente no está disponible al final del período de bloque, se renderizará en la fuente alternativa.
  • 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á» en formato.

Recomendaciones de uso en desarrollo web

font-displayLas estrategias reflejan diferentes puntos de vista sobre el compromiso entre rendimiento y estética.

Para la mayoría de los sitios, estas son las dos estrategias que serán más aplicables:

  • Si el rendimiento es una prioridad máxima: utilice font-display: optional. Este es el enfoque más «eficaz»: el procesamiento del texto se retrasa por no más de 100 ms y existe la seguridad de que no habrá cambios de diseño relacionados con el intercambio de fuentes.
  • Si mostrar texto en una fuente web es una prioridad: Úselo, font-display: swappero asegúrese de entregar la fuente lo suficientemente temprano para que no cause un cambio de diseño.

font-display: auto, font-display: block, font-display: swap, y font-display: fallbacktodos tienen el potencial de los cambios de diseño de causa cuando se cambia el tipo de letra. Sin embargo, de estos enfoques, font-display: swapserá el que menos demore la renderización del texto.

Por lo tanto, es el enfoque preferido para situaciones en las que es importante que el texto finalmente se represente como una fuente web.

También tenga en cuenta que estos dos enfoques se pueden combinar: por ejemplo, utilizar font-display: swappara la marca y otros elementos de página visualmente distintivos; utilizar font-display: optionalpara las fuentes utilizadas en el texto del cuerpo.

Las estrategias de font-displayque realmente funcionan bien para las fuentes tradicionales no funcionan tan bien para las fuentes de iconos.

La fuente alternativa para una fuente de icono generalmente se ve significativamente diferente a la fuente de icono y sus caracteres pueden transmitir un significado completamente diferente.

Como resultado, es más probable que las fuentes de iconos provoquen cambios significativos en el diseño. Además, el uso de una fuente alternativa puede no ser práctico.

Si es posible, es mejor reemplazar las fuentes de iconos con SVG (esto también es mejor para la accesibilidad). Las versiones más recientes de fuentes de iconos populares suelen admitir SVG. Para obtener más información sobre cómo cambiar a SVG, consulte Font Awesome e Iconos de material design.