El componente Font y el preload

Font: qué inyecta en el head

El componente se coloca en el head, casi siempre dentro del layout o de un componente Head dedicado, y recibe la cssVariable de la familia que quieres activar. Con eso le basta para saber qué reglas emitir.

---// src/layouts/Base.astroimport { Font } from 'astro:assets';---<html lang="es">  <head>    <meta charset="utf-8" />    <Font cssVariable="--font-inter" />  </head>  <body>    <slot />  </body></html>

Lo que <Font /> escribe en el HTML no es magia, sino exactamente las etiquetas que habrías tenido que redactar a mano, pero derivadas de tu configuración y apuntando a los archivos que Astro ya descargó y optimizó. Una regla @font-face por cada variante, con su src local, y la definición de la variable CSS con la pila de fallbacks resuelta.

<!-- salida aproximada que genera el componente --><style>  @font-face {    font-family: 'Inter';    src: url('/_astro/inter-400.abc123.woff2') format('woff2');    font-weight: 400;    font-display: swap;  }  :root { --font-inter: 'Inter', 'Inter fallback', sans-serif; }</style>

Repara en el detalle: la variable --font-inter no contiene solo el nombre de la fuente, sino una pila completa que incluye la fuente real, un respaldo optimizado y una familia genérica. Ese es el valor que tu CSS consumirá, y por eso te basta con nombrarlo para heredar toda la estrategia de carga y respaldo que Astro montó por ti.

Aplicar la fuente por CSS

Con la etiqueta en el head, la fuente está disponible pero aún no se usa: Astro no decide por ti qué elementos la llevan. Esa elección es tuya, y la haces en CSS refiriéndote a la variable, ya sea en un bloque <style> con ámbito de componente o en tu hoja global.

<h1>Titular con fuente propia</h1><p>Este párrafo usa la fuente del sistema.</p><style>  h1 { font-family: var(--font-inter); }</style>

La separación es deliberada y valiosa. El componente <Font /> se ocupa de que la fuente exista y se cargue bien; el CSS se ocupa de dónde se aplica. Puedes tener varias familias activas en el head y repartirlas con precisión, una para titulares, otra para el cuerpo, otra para el código, sin que ninguna se imponga donde no la quieres. La variable es el punto de encuentro entre ambas responsabilidades.

preload: coste y criterio

Por defecto, <Font /> emite las reglas @font-face pero no fuerza la descarga anticipada: el navegador buscará la fuente cuando la encuentre necesaria al aplicar los estilos. La prop preload cambia eso, añadiendo un <link rel="preload"> que le dice al navegador que empiece a bajar la fuente cuanto antes.

<head>  <Font cssVariable="--font-inter" preload /></head>

Adelantar la descarga suena siempre bueno, pero no lo es. Un preload compite por el ancho de banda con todo lo demás que la página necesita para el primer pintado, y precargar una fuente que no aparece en la parte visible inicial roba prioridad a recursos que sí importan.

Si una familia tiene varias variantes, puedes afinar aún más pasando un arreglo a preload en vez de un booleano, para adelantar solo el archivo concreto que hace falta arriba del pliegue y dejar los demás a demanda. Así precargas, por ejemplo, el peso regular que domina el cuerpo del texto sin arrastrar contigo la negrita o la cursiva, que el navegador ya buscará si aparecen.

<head>  <!-- precarga selectiva: solo el archivo que se ve al inicio -->  <Font    cssVariable="--font-inter"    preload={[{ weight: 400, style: 'normal' }]}  /></head>

La regla general es de contención: cada byte que precargas es un byte que le quitas a otra cosa. La precarga bien usada es un bisturí, no una manta.