Tipografías Maestras
Directorio experto de fuentes y laboratorios de código para una web impecable.
Catálogos & Fundiciones
¿Por qué las llamamos "Fundiciones"? El término proviene de la era de la imprenta física, cuando las letras se fabricaban fundiendo plomo en moldes. Hoy, los estudios de diseño digital conservan este nombre en honor a los maestros artesanos del metal.
Recursos Gratuitos
Google Fonts
El estándar mundial. Ideal para rendimiento y carga optimizada vía CDN.
Explorar catálogo →Fontshare
Fuentes gratuitas de grado profesional (ITF). Calidad excepcional.
Calidad Premium →Velvetyne
Fuentes experimentales y artísticas de código abierto. Diseño creativo.
Descubrir →Recursos Premium & Pago
Adobe Fonts
Catálogo profesional inmenso. Incluido con cualquier plan de Creative Cloud.
Ver fuentes →Font Squirrel
Selección de fuentes comerciales gratuitas y generador de kits web.
Ir al sitio →Laboratorio de Implementación
🔗 Google Fonts (HTML)
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
🎨 Definición CSS
body {
font-family: 'Inter', sans-serif;
font-display: swap;
}
💡 El secreto del rendimiento
Evita cargar demasiados pesos. Lo ideal es usar Regular (400) y Bold (700). Menos archivos significa una web más rápida.
Optimización Crítica: font-display: swap
Añade siempre &display=swap a tus URLs de fuentes. Esto evita el "texto invisible" durante la carga, permitiendo que el navegador use una fuente del sistema hasta que la principal esté lista. ¡Vital para tus Core Web Vitals!