Cómo usar la API de CSS de Google Fonts para entregar fuentes web de manera eficiente
A lo largo de los años, la tecnología de fuentes web cambió mucho. Lo que antes era una práctica de nicho que requería una imagen de texto o un complemento Flash (y que comprometía la optimización de motores de búsqueda de tu sitio web) ahora es una práctica estándar en toda la Web. Antes, tenías que cargar una fuente completa antes de que se cargara la página, con estilos y caracteres que tal vez ni siquiera hayas usado, pero incluso eso ya es cosa del pasado.
La API de CSS de Google Fonts también evolucionó con el paso de los años para mantenerse al día con los cambios en la tecnología de fuentes web. Ha recorrido un largo camino desde su propuesta de valor original: hacer que la Web sea más rápida, ya que permite que el navegador almacenen en caché las fuentes de uso general en todos los sitios web que usan la API. Esto ya no es cierto, pero la API aún proporciona optimizaciones adicionales e importantes para que los sitios web se carguen rápidamente y las fuentes funcionen bien.
Con la API de CSS de Google Fonts, tu sitio web puede solicitar solo los datos de fuente necesarios para mantener el tiempo de carga de CSS al mínimo, lo que garantiza que los visitantes del sitio web puedan cargar tu contenido lo más rápido posible. La API responderá a cada solicitud con la mejor fuente para ese navegador web.
Todo esto sucede al incluir una sola línea de HTML en tu código.
Cómo usar la API de CSS de Google Fonts
La documentación de la API de CSS de Google Fonts lo resume de forma clara:
No necesitas programar; solo debes agregar un vínculo especial a la hoja de estilo en el documento HTML y, luego, consultar la fuente en un estilo CSS.
Como mínimo, debes incluir una sola línea en tu código HTML, como se muestra a continuación:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Cuando solicitas una fuente de la API, debes especificar qué familia deseas y, opcionalmente, sus pesos, estilos, subconjuntos y muchas otras opciones. Luego, la API manejará tu solicitud de una de estas dos maneras:
- Si tu solicitud usa parámetros comunes para los que la API ya tiene archivos, mostrará inmediatamente CSS al usuario y lo dirigirá a estos archivos.
- Si solicitaste una fuente con parámetros que la API no tiene almacenados en caché actualmente, se agruparán tus fuentes en un subconjunto con HarfBuzz para hacerlo rápidamente y devolverá CSS que apunten a ellos.
Los archivos de fuentes pueden ser grandes, pero no es necesario que lo sean.
Es cierto que las fuentes web pueden ser grandes. Un solo grosor de Noto Sans Japanese en WOFF2 es de casi 3.4 MB, y descargarlo para cada uno de tus usuarios sería un lastre para el tiempo de carga de la página. Si cada milisegundo es importante y cada byte es valioso, debes asegurarte de cargar solo los datos que tus usuarios necesitan.
La API de CSS de Google Fonts puede crear archivos de fuentes muy pequeños (llamados subconjuntos), generados en tiempo real, para entregar a los usuarios solo el texto y los estilos que requiere tu sitio web. En lugar de entregar una fuente completa, puedes solicitar caracteres específicos con el parámetro text
.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
La API de CSS también proporciona optimizaciones adicionales de fuentes web a tus usuarios automáticamente, sin ningún parámetro de API. La API entregará a tus usuarios archivos CSS con unicode-range
ya habilitado (si su navegador web lo admite), de modo que carguen las fuentes solo para los caracteres específicos que necesita tu sitio web.
El descriptor CSS del intervalo Unicode es una herramienta que ahora se puede usar para combatir las descargas de fuentes grandes. Esta propiedad de CSS establece el rango de caracteres Unicode que contiene la declaración @font-face
. Si se renderiza uno de estos caracteres en la página, se descarga esa fuente. Esto funciona bien para todo tipo de idiomas, así que puedes tomar una fuente que incluya caracteres latinos, griegos o cirílicos y hacer subconjuntos más pequeños. En el gráfico anterior, puedes ver que, si tuvieras que cargar los tres conjuntos de caracteres, serían más de 600 glifos.
Esto también habilita las fuentes chinas, japonesas y coreanas (CJK) para la Web. En el gráfico anterior, puedes ver que una fuente CJK abarca entre 15 y 20 veces la cantidad de caracteres que abarca una fuente de caracteres latinos. Estas fuentes suelen ser muy grandes y muchos de los caracteres de esos idiomas no se usan con tanta frecuencia como otros.
El uso de la API de CSS y unicode-range puede reducir las transferencias de archivos en aproximadamente un 90%. Con el descriptor unicode-range
, puedes definir cada parte por separado, y cada sección solo se descarga una vez que tu contenido contiene uno de los caracteres de estos rangos de caracteres.
Ejemplo: Si quieres establecer solo la palabra "こんにちは" en Noto Sans JP, puedes hacer lo siguiente:
- Aloja tus propios archivos WOFF2.
- Usa la API de CSS para recuperar el WOFF2.
- Usa la API de CSS con el parámetro text= establecido en “こんにちは”.
En este ejemplo, puedes ver que, si usas la API de CSS, ya ahorras un 97.5% en comparación con la autoalojación de la fuente WOFF2, gracias a la compatibilidad integrada de la API para separar fuentes grandes en un rango Unicode. Si vas un paso más allá y especificas exactamente el texto que deseas mostrar, puedes reducir aún más el tamaño de la fuente a solo el 95.3% de la fuente de la API de CSS, es decir, un 99.9% más pequeña que la fuente autoalojada.
La API de CSS de Google Fonts entregará automáticamente las fuentes en el formato más pequeño y compatible que admita el navegador de tu usuario. Si el usuario usa un navegador compatible con WOFF2, la API proporcionará las fuentes en WOFF2, pero si usa un navegador más antiguo, la API entregará las fuentes en un formato compatible con ese navegador. Para reducir el tamaño del archivo de cada usuario, la API también quita datos de las fuentes cuando no son necesarios. Por ejemplo, se quitarán los datos de sugerencias para los usuarios cuyos navegadores no los necesiten.
Prepara tus fuentes web para el futuro con la API de CSS de Google Fonts
El equipo de Google Fonts también contribuye a los nuevos estándares del W3C que siguen innovando en tecnologías de fuentes web, como WOFF2. Un proyecto actual es la transferencia de fuentes incremental, que permite a los usuarios cargar partes muy pequeñas de archivos de fuentes a medida que se usan en la pantalla y transmitir el resto a pedido, superando el rendimiento de unicode-range. Al utilizar nuestra API de fuentes web, los usuarios obtienen estas mejoras subyacentes de la tecnología de transferencia de fuentes cuando están disponibles en sus navegadores.
Esta es la belleza de una API de fuentes: tus usuarios tienen el beneficio de cada mejora de tecnología nueva sin realizar cambios en tu sitio web. ¿Nuevo formato de fuente web? No hay problema. ¿Se admite un navegador o sistema operativo nuevo? Ya se solucionó. Por lo tanto, en lugar de enredarte con el mantenimiento de tus fuentes web, puedes enfocarte en tus usuarios y tu contenido.
Fuentes variables compatibles con la función integrada
Las fuentes variables son archivos de fuente que pueden almacenar un rango de variaciones de diseño entre varios ejes, y la versión nueva de la API de CSS de Google Fonts incluye compatibilidad con ellas. Agregar un eje de variación adicional permite una nueva flexibilidad con una fuente, pero puede duplicar el tamaño del archivo de fuente.
Cuando eres más específico en tu solicitud a la API de CSS, la API de CSS de Google Fonts puede entregar solo la parte de la fuente variable que necesita tu sitio web, con el fin de reducir el tamaño de descarga para los usuarios. Esto permite el uso de fuentes variables para la Web sin generar tiempos de carga de páginas largos. Para ello, especifica un solo valor en un eje o un rango. Incluso puedes especificar varios ejes y varias familias de fuentes en una sola solicitud. La API es flexible para satisfacer tus necesidades.
Fácil de implementar y optimizado para ti
La API de CSS de Google Fonts te ayuda a publicar fuentes con las siguientes características:
- Mayor compatibilidad con navegadores web.
- Lo más pequeño posible.
- Se entrega rápidamente.
- Es más fácil de usar.
Para obtener más información sobre Google Fonts, visita fonts.google.com. Para obtener más información sobre la API de CSS, consulta la documentación de la API.
Agradecimientos
Imagen hero de leesehee.