Proveedores: Google, Fontsource y local

La clave provider de cada familia decide de dónde sale la fuente, y Astro trae de fábrica un catálogo de proveedores para los orígenes más comunes, además de la puerta abierta a construir el tuyo. Todos comparten el mismo motor por debajo, unifont, que unifica catálogos tan distintos como Google, Fontsource o un registro privado bajo una interfaz común. Esta lección recorre los proveedores integrados, las palancas para descargar solo lo que usas, y cómo escribir un proveedor propio cuando ninguno de los de serie encaja.

El catálogo de proveedores integrados

Astro exporta sus proveedores desde astro/config bajo el objeto fontProviders. Cada uno resuelve una familia contra un origen distinto: google y bunny sirven el catálogo de Google Fonts, fontsource y npm toman fuentes publicadas como paquetes, fontshare y adobe acceden a sus respectivas bibliotecas, y local lee archivos de tu disco. Elegir uno es cambiar una línea.

---
// astro.config.mjs
import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  fonts: [
    { provider: fontProviders.google(), name: 'Inter', cssVariable: '--font-inter' },
    { provider: fontProviders.fontsource(), name: 'Roboto', cssVariable: '--font-roboto' },
  ],
});

google y fontsource acceden en gran medida a las mismas familias, pero por caminos distintos: el primero consulta la API de Google Fonts, el segundo resuelve paquetes de código abierto publicados en el registro de Fontsource. La familia resultante es equivalente; cambia la infraestructura que la entrega y, con ella, matices de disponibilidad y de versiones.

subsets, weights y styles: descargar solo lo necesario

Una fuente completa puede pesar cientos de kilobytes por variante, la mayoría de ellos glifos que tu sitio jamás mostrará. Tres claves recortan esa grasa. weights limita los grosores; styles limita entre normal y cursiva; y subsets limita los rangos de caracteres a los alfabetos que de verdad usas, como latin o latin-ext, descartando el cirílico, el griego o el vietnamita si no aparecen.

---
// astro.config.mjs
export default defineConfig({
  fonts: [
    {
      provider: fontProviders.fontsource(),
      name: 'Inter',
      cssVariable: '--font-inter',
      weights: [400, 600, 700],
      styles: ['normal'],
      subsets: ['latin', 'latin-ext'],
    },
  ],
});

Cada valor que quitas es un archivo que no se descarga. Pedir tres pesos en un solo estilo y dos subconjuntos, en lugar de la familia entera con todos sus grosores y alfabetos, puede reducir el peso tipográfico a una fracción. La disciplina aquí es la misma que con cualquier activo: no cargues lo que no vas a mostrar.

Cuando necesitas combinaciones muy concretas, puedes declarar la misma familia varias veces, con idéntico name, provider y cssVariable, cambiando solo los weights o styles. Astro fusiona los resultados y descarga solo la intersección real de lo que pediste, de modo que puedes bajar el peso 500 en normal y cursiva pero el 700 solo en normal, sin traer nada de más.

El proveedor local y los proveedores propios

El proveedor local no busca en la red: declara archivos que ya tienes como variants, y cada variante es un @font-face con su src, su weight y su style. Si omites peso o estilo, Astro intenta inferirlos del primer archivo.

---
// astro.config.mjs
export default defineConfig({
  fonts: [
    {
      provider: fontProviders.local(),
      name: 'Geist',
      cssVariable: '--font-geist',
      options: {
        variants: [
          { weight: '100 900', style: 'normal', src: ['./src/assets/fonts/GeistVariable.woff2'] },
        ],
      },
    },
  ],
});

Cuando ninguno de los proveedores de serie encaja, por ejemplo si tu empresa sirve las fuentes desde un registro privado, construyes el tuyo. Un proveedor es una función que devuelve un objeto FontProvider con un name y un resolveFont, más los opcionales init y listFonts. resolveFont recibe el nombre de la familia y devuelve sus datos de fuente.

// font-provider.ts
import type { FontProvider } from 'astro';

export function registryFontProvider(): FontProvider {
  let data: Record<string, any> = {};
  return {
    name: 'registry',
    init: async () => { data = await cargarFuentesDelRegistro(); },
    listFonts: () => Object.keys(data),
    resolveFont: ({ familyName }) => {
      const fonts = data[familyName];
      return fonts ? { fonts } : undefined;
    },
  };
}

Por debajo, todo el sistema de fuentes se apoya en unifont, que expone la primitiva defineFontProvider para escribir proveedores universales. Astro sabe envolver cualquier proveedor de unifont en su propio objeto FontProvider, así que el ecosistema de resolutores de fuentes de la comunidad está a tu alcance sin reinventar nada.

flowchart LR
FAM[familia con su provider] --> UNI[capa unifont]
UNI --> BUILTIN[proveedor integrado google fontsource local]
UNI --> CUSTOM[proveedor propio FontProvider]
BUILTIN --> RF[resolveFont devuelve las font faces]
CUSTOM --> RF
RF --> FILES[Astro descarga y optimiza los archivos]
style FAM fill:#89b4fa,color:#11111b
style FILES fill:#a6e3a1,color:#11111b