Cómo usar la API de CSS de Google Fonts para enviar fuentes web de forma eficiente
Con el paso de los años, la tecnología de fuentes web ha cambiado mucho. Lo que solía ser una práctica de nicho que requería una imagen de texto o un complemento Flash (y que comprometía la optimización para el motor de búsqueda de tu sitio web) ahora es una práctica estándar en la Web. Había una vez que se tenía que cargar una fuente completa antes de que se cargara la página, con estilos y caracteres que quizás ni siquiera habías usado, pero incluso eso ha quedado en el pasado.
La API de CSS de Google Fonts también ha evolucionado con los años para mantenerse al día con los cambios en la tecnología de fuentes web. Recorrió un largo camino desde su propuesta de valor original: lograr que la Web sea más rápida permitiendo que su navegador almacene en caché las fuentes de uso general en todos los sitios web que utilizaban la API. Esto ya no es así, 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 el 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 el 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 muy bien:
No es necesario que realices ninguna programación; todo lo que debes hacer es agregar un vínculo de hoja de estilo especial a tu documento HTML y, luego, consultar la fuente en un estilo CSS.
Lo mínimo que debes hacer es incluir una sola línea en tu código HTML, como esta:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Cuando solicitas una fuente a la API, especificas qué familia o familias deseas y, de manera opcional, sus grosores, estilos, subconjuntos y muchas otras opciones. Luego, la API manejará tu solicitud de una de las siguientes dos maneras:
- Si tu solicitud utiliza parámetros comunes para los que la API ya tiene archivos, mostrará CSS de inmediato al usuario y lo dirigirá a estos archivos.
- Si solicitaste una fuente con parámetros que la API no tiene en caché actualmente, dividirá las fuentes sobre la marcha con HarfBuzz para hacerlo rápidamente y mostrará CSS que apunte a ellos.
Los archivos de fuente pueden ser grandes, pero no es necesario
Las fuentes web pueden ser grandes, es cierto. Solo un peso de Noto Sans japonés en WOFF2 es de casi 3.4 MB, y descargarlo a cada uno de tus usuarios implicaría un retraso en el tiempo de carga de la página. Cuando cada milisegundo cuenta y cada byte es valioso, quieres asegurarte de cargar solo los datos que necesitan tus usuarios.
La API de CSS de Google Fonts puede crear archivos de fuentes muy pequeños (llamados subconjuntos), que se generan en tiempo real, para brindar a los usuarios solo el texto y los estilos que requiere tu sitio web. En lugar de mostrar una fuente completa, puedes solicitar caracteres específicos mediante 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 de fuentes web adicionales para tus usuarios de forma automática, sin ningún parámetro de API. La API entregará a los usuarios archivos CSS con unicode-range ya habilitado (si es compatible con su navegador web), 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 un rango de caracteres Unicode que contiene la declaración @font-face. Si se renderiza uno de estos caracteres en la página, se descargará esa fuente. Esto funciona bien para todo tipo de idiomas, por lo 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 estos tres grupos de caracteres, serían más de 600 glifos.
También habilita las fuentes chinas, japonesas y coreanas (CJK) para la Web. En el gráfico anterior, puedes ver que una fuente CJK cubre entre 15 y 20 veces la cantidad de caracteres que cubre una fuente de caracteres latinos. Estas fuentes suelen ser muy grandes y muchos de los caracteres de esos idiomas no se utilizan con tanta frecuencia como otros.
El uso de la API de CSS y el rango Unicode puede reducir las transferencias de archivos en aproximadamente un 90%. Con el descriptor unicode-range, puedes definir cada parte por separado. Cada porción solo se descarga cuando tu contenido incluye uno de los caracteres de estos rangos de caracteres.
Ejemplo: Si quieres establecer solo la palabra “红ん típicaちは” en Noto Sans JP, puedes hacer lo siguiente:
- Aloja por cuenta propia tus propios archivos WOFF2.
- Usa la API de CSS para recuperar el WOFF2.
- Usa la API de CSS con el parámetro text= configurado como “红ん típicaちは”.
En este ejemplo, puedes ver que al usar la API de CSS ya ahorras un 97.5% en comparación con alojar la fuente WOFF2 por cuenta propia, gracias a la compatibilidad integrada de la API para separar fuentes grandes en el intervalo Unicode. Si vas un paso más allá y especificas exactamente el texto que quieres mostrar, puedes reducir aún más el tamaño de la fuente a solo un 95.3% de la fuente de la API de CSS, que es 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 del usuario. Si tu usuario usa un navegador compatible con WOFF2, la API proporcionará las fuentes en WOFF2, pero si usa un navegador anterior, la API proporcionará las fuentes en un formato compatible con ese navegador. Para reducir el tamaño de archivo para 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.
Cómo preparar 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 W3C que continúan con la innovación de tecnologías de fuentes web, como WOFF2. Uno de los proyectos actuales es la Transferencia incremental de fuentes, que permite a los usuarios cargar partes muy pequeñas de los archivos de fuentes a medida que se usan en la pantalla y transmitirlos en el resto de las fuentes on demand, lo que supera el rendimiento del rango Unicode. Cuando usas nuestra API de fuentes web, tus usuarios obtienen estas mejoras subyacentes de la tecnología de transferencia de fuentes cuando están disponibles en sus navegadores.
Esto es lo maravilloso de una API de fuentes: tus usuarios se benefician de cada mejora de la tecnología nueva sin realizar ningún cambio en tu sitio web. ¿Nuevo formato de fuente web? No hay problema ¿Necesitas un nuevo navegador o sistema operativo? Ya está resuelto. Por lo tanto, en lugar de complicarse con el mantenimiento de las fuentes web, tiene la libertad de concentrarse en los usuarios y en el contenido.
Compatibilidad integrada con fuentes variables
Las fuentes variables son archivos de fuentes que pueden almacenar una variedad de variaciones de diseño entre varios ejes, y la nueva versión de la API de CSS de Google Fonts incluye compatibilidad con ellas. La adición de un eje adicional de variación permite una nueva flexibilidad con una fuente, pero puede casi el doble del tamaño del archivo de fuente.
Cuando seas más específico en tu solicitud a la API de CSS, la API de Google Fonts CSS 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 incurrir en largos tiempos de carga de la página. Puedes hacerlo especificando un único valor en un eje, o especificando un rango; incluso, puedes especificar varios ejes y varias familias de fuentes, todo 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 entregar fuentes con las siguientes características:
- Mayor compatibilidad con navegadores web
- Tan pequeño como sea posible
- Entrega rápida.
- Más fácil de usar para ti.
Si deseas 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
Hero image de leesehee.