Tabla de contenidos

¿Qué es google-fonts-helper?

google-fonts-helper es una herramienta de línea de comandos desarrollada en Node.js que permite a los desarrolladores descargar fuentes desde Google Fonts para alojarlas localmente en sus proyectos web.

Está especialmente diseñada para quienes desean tener:

  • Control absoluto sobre su tipografía web.
  • Reducir dependencias externas.
  • Optimizar el rendimiento del sitio.
  • Cumplir con políticas de privacidad más estrictas.

¿Por qué usarla?

Aunque Google Fonts permite incrustar fuentes fácilmente con un <link>, este método:

  • Depende de servidores externos,
  • Añade peticiones HTTP adicionales,
  • Puede afectar el rendimiento (LCP, FCP),
  • No cumple con el RGPD en algunos países si no se gestiona bien.

Con google-fonts-helper puedes:

  • Descargar solo los pesos, estilos y subsets que realmente usas.
  • Generar el bloque CSS @font-face automáticamente.
  • Integrarlo con cualquier stack (React, Vue, Laravel, ASP.NET Core, estático…).
  • Usarlo como parte de tu sistema de build (npm scripts, Gulp, Webpack…).

Instalación

Para realizar la instalación ejecuta el siguiente comando en la terminal:

npm install -g google-fonts-helper

Comandos esenciales

Ejemplo 1: Inter en .woff2, con subset latin

google-fonts-helper "Inter" \
  --formats=woff2 \
  --subsets=latin \
  --output-dir=wwwroot/fonts/inter

Ejemplo 2: JetBrains Mono en variantes específicas

google-fonts-helper "JetBrains Mono" \
  --formats=woff2 \
  --variants=regular,italic,700 \
  --output-dir=wwwroot/fonts/jetbrains

Opciones disponibles

OpcionDescripción
--output-dirRuta de salida (por defecto: fonts/)
--formatsFormatos: woff, woff2, ttf, eot, svg
--subsetsIdiomas: latin, cyrillic, latin-ext, etc.
--variantsPesos y estilos: regular, 700, italic, etc.
--displayValor para font-display: swap, fallback, etc.
--minifyMinimiza el archivo CSS generado
--no-cssSolo descarga las fuentes, sin generar CSS
--no-downloadSolo genera el CSS, útil si ya tienes las fuentes

Estructura generada

El archivo stylesheet.css contiene el bloque @font-face necesario para usarlo de inmediato.

fonts/
└── inter/
    ├── inter-regular.woff2
    ├── inter-italic.woff2
    └── stylesheet.css

Ejemplo del CSS generado

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('inter-regular.woff2') format('woff2');
}

Este CSS es limpio, moderno, y ya incluye buenas prácticas como font-display: swap, que mejora la experiencia de carga.

Recursos oficiales

Conclusión

google-fonts-helper es una herramienta indispensable si te importa la calidad técnica de tu web. Te da el control total de las fuentes, mejora la velocidad de carga y facilita la integración de tipografías profesionales en cualquier stack.

Rápida, simple y precisa. Ideal para desarrolladores que quieren hacer las cosas bien desde el principio.