Fuentes
Google Fonts
Tipografías web libres con CDN y variable fonts
Biblioteca de familias tipográficas open source servidas por Google, integrable en web y apps con CSS, @font-face o la API de Fonts.
Ir al sitio oficialVista previa
Familias de ejemplo
Muestras servidas desde Google Fonts. El sitio usa Bricolage Grotesque y Geist de forma local; aquí puedes comparar otras opciones del catálogo.
Hago cosas. Algunas hasta funcionan.
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Texto de interfaz y fichas del repositorio.
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Párrafos largos con buena lectura en pantalla.
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
npm run build && npm run layout:check
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Ficha abierta
Para qué sirve y cómo encaja
Google Fonts es la puerta de entrada más usada para tipografía web sin fricción de licencias en proyectos personales y producto digital. La calidad varía por familia: conviene revisar legibilidad en cuerpo de texto, no solo en el display.
Para marcparra.tech y proyectos con identidad tipográfica fija, encaja como fuente de prueba y como CDN de respaldo; cuando la marca cierra una familia, puede migrarse a self-hosting sin cambiar el stack.
Uso en tu proyecto
Instalación e importación
Comandos y fragmentos tomados de la documentación oficial. Elige tu caso, cópialos tal cual o pásale el prompt a tu agente.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">font-family: 'Inter', system-ui, sans-serif;Prompt para que tu agente lo instale
Pega esto en Cursor, Claude Code, Codex u otro agente de código:
Instala Google Fonts en este proyecto (contexto: sin framework). Documentación oficial: https://developers.google.com/fonts/docs/getting_started. Comando verificado: `<link rel="preconnect" href="https://fonts.googleapis.com">`. Haz solo la instalación o importación base indicada en esta pestaña; no asumas stack ni configuración del proyecto. Cuando termines, pregunta al usuario cómo quiere integrarlo o qué contexto necesitas para los siguientes pasos.Planes y modelos
Cómo se paga y qué incluye cada opción
- 01Gratis
Gratis
Familias open source sin coste de licencia. El uso comercial depende de la licencia de cada familia, casi siempre SIL Open Font License.
Funcionalidades
Qué puedes hacer con ella
- 01
Catálogo amplio
Miles de familias con pesos, estilos y subsets latinos, cirílicos y asiáticos según la fuente.
- 02
CDN y self-hosting
Enlace rápido desde fonts.googleapis.com o descarga para alojar los archivos en tu propio servidor.
- 03
Variable fonts
Muchas familias ofrecen ejes de peso y ancho en un solo archivo WOFF2.
- 04
Parejas sugeridas
La interfaz propone combinaciones de display y texto para acelerar decisiones de sistema tipográfico.
Cuándo usarla
Dónde encaja y dónde no
Te conviene si…
Te conviene si necesitas tipografías web legibles sin pagar licencias, quieres probar combinaciones rápido o integrar fuentes en un design system con pocos pasos.
Mejor otra opción si…
Mejor otra opción si necesitas una familia comercial con licencia de marca estricta, soporte de hinting para impresión profesional o un catálogo curado solo con fuentes de pago.