Cómo usar la API de CSS de Google Fonts para publicar fuentes web de forma eficiente
Con el paso de los años, la tecnología de las 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 al permitir que tu navegador almacene en caché las fuentes de uso común en todos los sitios web que utilizaban 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 se logra con la inclusión de 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 la siguiente manera:
No necesitas hacer ninguna programación. Solo debes agregar un vínculo de hoja de estilo especial a tu documento HTML y, luego, hacer referencia a 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 de la API, especificas qué familia o familias deseas y, de manera opcional, sus grosores, estilos, subconjuntos y muchas otras opciones. Luego, la API controlará tu solicitud de una de las siguientes 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é en este momento, se creará un subconjunto de tus fuentes sobre la marcha, con HarfBuzz para hacerlo rápidamente, y se mostrará un CSS que las apunte.
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. Cuando cada milisegundo cuenta y cada byte es valioso, debes 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), generados en tiempo real, para ofrecer 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 de CSS de rango Unicode es una herramienta que ahora se puede usar para combatir las descargas de fuentes grandes. Esta propiedad 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 descarga 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 crear 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 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 hace una fuente de caracteres latinos. Por lo general, estas fuentes son 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 das un paso más y especificas exactamente el texto que deseas mostrar, puedes reducir aún más el tamaño de la fuente al 95.3% de la fuente de la API de CSS, que es un 99.9% más pequeña que la fuente alojada por sí misma.
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, los datos de sugerencias se quitarán 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 las 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 transmitirlos en el resto on demand, lo que supera el rendimiento del intervalo 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 su navegador.
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. ¿Nuevo navegador o sistema operativo compatible? 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, aunque puede duplicar casi 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 para reducir el tamaño de descarga de 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.