Herramienta de vista previa & emparejamiento de fuentes
Explora, previsualiza y compara fuentes para tu próximo proyecto. Elige entre fuentes del sistema y populares de Google Fonts, y personaliza con controles en tiempo real de tamaño, grosor, altura de línea y espaciado entre letras. Prueba combinaciones de fuente de título + cuerpo en paralelo y genera código CSS listo para usar, todo en tu navegador y sin registro.
Browse system fonts and Google Fonts, preview with custom text, and compare font pairings side-by-side. Generate ready-to-use CSS code - all running locally in your browser.
Font Browser
40 fontsPreview
Inter
The quick brown fox jumps over the lazy dog.
24px / 1.5 lh / 0.0px ls · Loading...
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
font-family: 'Inter', sans-serif;
Fonts are loaded from Google Fonts CDN for accurate preview rendering. System fonts work offline. All search, filtering, and code generation runs locally. Google Fonts are licensed under the SIL Open Font License - free for commercial use.
Your font selections and settings are automatically saved.
¿Por qué usar nuestra herramienta de vista previa & emparejamiento de fuentes?
- Vista previa en vivo con controles completos: previsualiza cualquier fuente con personalización en tiempo real: ajusta el tamaño (8-128px), el grosor (100-900), la altura de línea y el espaciado entre letras, y activa la cursiva. Escribe tu propio texto para ver exactamente cómo quedará en tu diseño. Compatible con fuentes del sistema y de Google con carga instantánea de fuentes web.
- Emparejamiento de fuentes en paralelo: prueba combinaciones de fuente de título + cuerpo en paralelo, con controles independientes para cada fuente. Activa el modo comparación para afinar las combinaciones de tu proyecto. Perfecto para elegir fuentes complementarias para webs, branding y materiales impresos.
- CSS listo para usar y código @font-face: genera código CSS listo para producción para cada fuente y combinación. Copia reglas @import, etiquetas <link>, declaraciones CSS font-family o el código completo @font-face, todo formateado y listo para pegar en tu proyecto. Sin programar nada a mano.
- Juego de caracteres y detalles de la fuente: consulta el juego completo de caracteres de cada fuente, incluidas mayúsculas, minúsculas, números, puntuación y caracteres especiales. Consulta la categoría de la fuente, los grosores disponibles y el código CSS sugerido. Todos los datos están integrados: no hacen falta llamadas a API externas.
¿Quién usa la herramienta de vista previa & emparejamiento de fuentes?
- Diseño y desarrollo web: previsualiza fuentes para proyectos web con controles de texto, tamaño y grosor en vivo. Prueba combinaciones de fuentes de título y cuerpo antes de decidir el diseño. Genera etiquetas @import y <link> listas para tus archivos HTML y CSS.
- Branding y diseño de logotipos: compara combinaciones de fuentes para proyectos de identidad de marca. Comprueba cómo queda el nombre de una marca con distintos grosores y estilos. Previsualiza la tipografía de marca con textos reales en lugar de un lorem ipsum genérico.
- Creación de contenido y blogs: los bloggers y creadores de contenido pueden encontrar la combinación perfecta de fuentes para su sitio. Previsualiza cómo se renderiza el texto de cuerpo a tamaño de lectura y elige una fuente de título complementaria que encaje con el estilo de tu contenido.
- Prototipado de diseño UI/UX: los diseñadores pueden probar rápidamente opciones tipográficas para interfaces de usuario. Ajusta el espaciado entre letras y la altura de línea para garantizar una legibilidad óptima en distintos tamaños de pantalla. Copia las declaraciones CSS directamente en tu prototipo.
- Diseño editorial e impresión: previsualiza cómo aparecerán las fuentes en materiales impresos. Prueba combinaciones de serif y sans-serif para títulos y cuerpo. Ajusta tamaños y grosores según los requisitos de legibilidad de la impresión.
- CSS y desarrollo front-end: los desarrolladores front-end pueden explorar opciones de fuentes sin salir del navegador. Genera código CSS limpio y formateado para cualquier selección de fuente. Usa la salida CSS @font-face para fuentes autoalojadas o los enlaces al CDN de Google Fonts.
Preguntas frecuentes
La herramienta incluye fuentes del sistema (preinstaladas en tu dispositivo, como Arial, Helvetica, Georgia o Times New Roman) y populares de Google Fonts (como Roboto, Open Sans, Lato, Montserrat, Merriweather, Playfair Display, Fira Code y muchas más). Las fuentes de Google se cargan desde el CDN de Google para que la vista previa sea precisa.
Activa el modo comparación para ver dos fuentes en paralelo con controles independientes para cada una. Elige una fuente de título a la izquierda y una de cuerpo a la derecha, o compara dos fuentes para el mismo uso. Cada panel tiene sus propios controles de tamaño, grosor, altura de línea, espaciado entre letras y texto personalizado.
Para cada fuente, la herramienta genera una regla @import para archivos CSS, una etiqueta <link> para documentos HTML, una declaración CSS font-family con los valores de reserva adecuados y un bloque CSS completo con todos tus ajustes. En el modo emparejamiento puedes copiar el CSS de ambas fuentes.
Las fuentes de Google están licenciadas bajo la SIL Open Font License (OFL), que permite el uso comercial y personal gratuito, incluidos sitios web, aplicaciones, materiales impresos y branding. Las fuentes del sistema tienen sus propias licencias. Comprueba siempre la licencia concreta de la fuente para tu caso de uso.
Las fuentes del sistema funcionan totalmente sin conexión. Las fuentes de Google necesitan conexión a internet para cargarse desde el CDN de Google en la vista previa. El explorador, la búsqueda y el filtrado de fuentes funcionan sin conexión porque los metadatos de las fuentes están integrados en la herramienta.
El grosor de fuente va de 100 (fino) a 900 (negro). Los grosores habituales son 400 (normal), 700 (negrita) y 300 (ligera). No todas las fuentes incluyen todos los grosores: la herramienta solo muestra los disponibles para la fuente seleccionada.
La vista del juego de caracteres muestra todo el repertorio de caracteres de una fuente, organizado en mayúsculas, minúsculas, números, puntuación y símbolos. Te ayuda a comprobar si una fuente admite los caracteres que necesitas para tu proyecto.
El espaciado entre letras (tracking) ajusta el espacio entre caracteres. Un espaciado ajustado puede hacer que los títulos se vean más cohesionados, mientras que un espaciado mayor puede mejorar la legibilidad del texto de cuerpo. La herramienta permite ajustarlo de -2px a +5px.
Sí. Tus selecciones de fuentes, el texto personalizado, el tamaño, el grosor, la altura de línea y el modo comparación se guardan automáticamente en el localStorage de tu navegador. Nunca se envían datos a un servidor ni se almacenan externamente.
Copia la regla @import y pégala al principio de tu archivo CSS, o copia la etiqueta <link> y añádela al <head> de tu HTML. La declaración CSS font-family puede aplicarse a cualquier elemento. Para fuentes autoalojadas, usa el bloque CSS completo @font-face.