Fontsource

Qué es

Fontsource es un proyecto open source que distribuye más de 1500 fuentes open source (Inter, Roboto, Geist, JetBrains Mono, Open Sans y muchas más, varias con soporte de fuentes variables) como paquetes npm individuales. La idea es autoalojar las tipografías en tu propio proyecto en vez de cargarlas desde un servicio externo como Google Fonts. Está mantenido por la organización fontsource y desarrollado principalmente en TypeScript, bajo licencia MIT.

Para qué sirve

• Instalar una fuente web como una dependencia más del proyecto, con npm o pnpm.
• Eliminar la latencia de DNS y conexión TCP adicionales que implica un CDN externo de fuentes.
• Fijar la versión de cada fuente y tener control reproducible sobre sus actualizaciones.
• Cargar tipografías sin conexión, útil para aplicaciones web progresivas (PWA).
• Reducir dependencias de terceros por motivos de privacidad o cumplimiento.

Cuándo usarlo

Encaja cuando quieres servir tus fuentes desde tu propio dominio en lugar de Google Fonts u otro CDN, ya sea por rendimiento, privacidad o control de versiones. Funciona con cualquier stack que use un bundler como Vite o Webpack (React, Vue, Svelte, Astro, etc.), ya que la fuente se importa como CSS dentro del bundle. Si prefieres no gestionar dependencias y te basta con un enlace, un CDN de fuentes sigue siendo más simple.

Ejemplo

Instalar la fuente Roboto y usarla en un proyecto:

npm install @fontsource/roboto

// Importa el peso 400 por defecto
import '@fontsource/roboto';

// O pesos y estilos concretos
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/700-italic.css';

body {
  font-family: 'Roboto', sans-serif;
}

Puntos clave

• Catálogo de más de 1500 familias open source, muchas disponibles como fuentes variables.
• Cada fuente es un paquete npm independiente que solo trae lo que necesitas.
• Se integra con bundlers modernos importando los archivos CSS de cada peso o estilo.
• Mejora el rendimiento al evitar resoluciones DNS y conexiones a CDN externos.

Ten en cuenta

• Requiere un bundler (Vite, Webpack o similar) que sepa importar CSS al build final; no está pensado para incluirlo con una simple etiqueta script.
• Cada fuente conserva su propia licencia open source; revísala antes de usarla en producción.
• Autoalojar implica que tú sirves y cacheas los archivos de fuente, sin la caché compartida que ofrecía antaño un CDN.