Fuentes gratuitas: sitios principales, vistas previas en vivo y cómo usarlas
Busque fuentes confiables en busca de fuentes gratuitas, pruebe vistas previas en vivo, copie CSS limpio y aprenda la forma correcta de usar fuentes web. Se incluyen colecciones de código abierto, gratuitas para uso comercial y personal.
Fuentes de Google
OFLLa biblioteca de código abierto más grande con CDN global rápido, subconjuntos y fuentes variables. Ideal para web y aplicaciones. La mayoría de las familias utilizan la licencia SIL Open Font.
Fontshare (por la ITF)
GratisTipos de letra de calidad ofrecidos de forma gratuita por Indian Type Foundry. Familias limpias, fácil integración de CDN y muchas opciones variables.
Fuente Ardilla
Comercial gratuitoDirectorio seleccionado centrado en fuentes de uso comercial gratuito. Incluye un generador de fuentes web para autohospedaje.
La liga de tipos móviles
OFLFundición clásica de código abierto con familias atemporales como League Spartan y Raleway. Ideal para branding y editorial.
terciopeloyne
OFLTipos de letra experimentales de código abierto con estilos de visualización distintivos. Perfecto para carteles, cultura y trabajo creativo.
Colectivo
OFLFundición comunitaria que lanza fuentes gratuitas de alta calidad bajo licencias abiertas. Fuertes opciones editoriales y de visualización.
Fundición abierta
OFLÍndice de fuentes de código abierto seleccionado con herramientas de prueba y presentación centrada en el diseño. Ideal para descubrir familias frescas.
1001 fuentes
Licencias MixtasAmplio directorio con filtros para uso comercial gratuito. Leer la licencia por familia; muchos son sólo para uso personal.
DaFont
Uso personalArchivo enorme ideal para proyectos personales e inspiración. Las licencias varían ampliamente; revisa cada página de descarga.
Fuentes de íconos (fuente impresionante, íconos de materiales, ícono de remezcla)
Niveles gratuitosPara iconos de interfaz de usuario que utilizan una canalización de fuentes. Considere los sistemas de íconos SVG modernos, pero las fuentes de íconos siguen siendo útiles para adiciones rápidas.
Vista previa en vivo y fragmentos de CSS
Solo local: no se ha subido nadaComparación de funciones (instantánea)
Las licencias varían según la familia.| Sitio | Código abierto | Comercial gratuito | Fuentes variables | CDN/fuentes web | Notas |
|---|---|---|---|---|---|
| Fuentes de Google | Sí | Sí* | Sí | Sí | Biblioteca más grande, CDN rápido |
| fuente compartida | Mezclado | Sí | Muchos | Sí | familias modernas |
| Fuente Ardilla | Mezclado | Sí* | Alguno | Generador | Seleccionado para uso comercial |
| Liga de tipo móvil | Sí | Sí | Alguno | Autoanfitrión | Clásicos atemporales |
| terciopeloyne | Sí | Sí | Alguno | Autoanfitrión | exhibición experimental |
| DaFont | No | Varía | Pocos | No | Ideal para proyectos personales |
Cómo utilizar fuentes gratuitas en la Web
- Verifique la licencia: OFL y otras licencias permisivas son las mejores para proyectos comerciales. Algunos sitios enumeran fuentes sólo para uso personal.
- Elija la entrega: enlace CDN para mayor velocidad o autohospedaje con @fuente-cara para control y privacidad.
- Precargue fuentes críticas para su texto principal si le preocupa CLS; Defina pilas de respaldo para evitar flashes.
- Prefiera fuentes variables cuando estén disponibles para reducir las solicitudes y obtener pesos flexibles.
Ejemplo de CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
Ejemplo de autohospedaje
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* Verifique siempre la licencia de cada familia en el sitio de origen.
Preguntas frecuentes
¿Las fuentes de Google son gratuitas para uso comercial?
La mayoría se publican bajo OFL y son gratuitos para uso comercial. Confirme la licencia en cada página familiar.
¿Debo utilizar fuentes de iconos o iconos SVG?
Los íconos SVG son más flexibles para aplicaciones modernas. Las fuentes de iconos siguen siendo útiles para configuraciones rápidas o canalizaciones heredadas.
¿Las fuentes web afectan la velocidad del sitio?
Sí. Usar visualización de fuente: intercambiar, subconjuntos cuando sea posible y limite familias y pesos.
¿Cuál es la mejor fuente de uso general?
Inter, Roboto y Source Sans 3 son versátiles. Combínalo con una serifa como Merriweather o Playfair para los títulos.