Developer Tools
Text ToolsHerramienta de Vista Previa de Fuentes
Previsualiza cualquier fuente de Google con texto personalizado, tamaño, peso y color. Genera código CSS al instante. Herramienta gratuita de vista previa de fuentes.
Fuentes Populares
Style
Browser Support
Style Tags
216 fonts
Vista Previa en Vivo
The quick brown fox jumps over the lazy dog
Vista Previa de Fuente
Nombre de Fuente:Roboto
Tamaño de Fuente:32px
Peso de Fuente:400
Código CSS
CSS font-family:
font-family: 'Roboto', sans-serif;URL de Importación de Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}Herramientas Relacionadas
Acerca de la Herramienta de Vista Previa de Fuentes
Cómo Funciona
- Ingresa cualquier nombre de familia de Google Fonts o elige de la lista popular
- La fuente se carga dinámicamente a través de la API de Google Fonts en tu navegador
- Ajusta el peso, tamaño, color y fondo para ver tu configuración ideal
- Copia la declaración CSS font-family o la URL de importación para tu proyecto
- Cambia entre textos de muestra predefinidos o ingresa texto personalizado
Casos de Uso Comunes
- Elegir la tipografía correcta para un nuevo proyecto web
- Comparar cómo se ven diferentes pesos de la misma fuente
- Generar el fragmento CSS correcto para una Google Font
- Mostrar opciones de fuente a clientes sin salir del navegador
- Verificar el renderizado de números y símbolos para dashboards
Preguntas Frecuentes
¿Qué es la Herramienta de Vista Previa de Fuentes?
La Herramienta de Vista Previa de Fuentes te permite cargar cualquier familia de Google Fonts, ajustar su peso, tamaño, color y fondo, previsualizarla con texto personalizado y copiar el código CSS de importación, todo directamente en tu navegador.
¿Cómo previsualizo una Google Font?
Escribe el nombre de la fuente (por ejemplo, 'Playfair Display') en el cuadro de búsqueda y haz clic en 'Cargar fuente', o selecciona un nombre de la lista de fuentes populares.
¿Puedo usar cualquier Google Font?
Sí. Puedes escribir el nombre exacto de cualquier fuente disponible en Google Fonts. La herramienta construye la URL correcta y carga todos los pesos disponibles (100–900) automáticamente.
¿Qué pesos de fuente están disponibles?
La herramienta solicita pesos del 100 al 900 de Google Fonts. Si una fuente no incluye un peso específico, el navegador usará el peso más cercano disponible.
¿Cómo copio el código CSS para mi proyecto?
Una vez cargada la fuente, ve a la sección de Código CSS en el panel derecho. Usa los botones de copia junto a cada fragmento para copiar la declaración font-family, la URL @import o el bloque CSS completo.
¿Qué textos de muestra están disponibles?
Se proporcionan seis presets: Pangrama, Alfabeto, Números y Símbolos, Lorem Ipsum, un ejemplo de Titular y un ejemplo de Párrafo. También puedes escribir tu propio texto personalizado.
¿Esta herramienta almacena datos?
No. La Herramienta de Vista Previa de Fuentes es completamente del lado del cliente. Carga fuentes a través de la API pública de Google Fonts y no almacena nada en ningún servidor.
¿Puedo cambiar el color del texto y el fondo?
Sí. Usa los selectores de color en la sección Colores para elegir cualquier color hexadecimal para el texto y el fondo de la vista previa. Esto es útil para verificar ratios de contraste.
¿Por qué falla la carga de una fuente?
La carga puede fallar si el nombre de la fuente está mal escrito, si la fuente ha sido eliminada de Google Fonts, o si tu red bloquea solicitudes a fonts.googleapis.com.
¿Esta herramienta es gratuita?
Sí, la Herramienta de Vista Previa de Fuentes es completamente gratuita. Las fuentes son servidas por el CDN de Google Fonts bajo licencias de código abierto.
¿Puedo comparar varias fuentes?
Puedes cambiar rápidamente entre fuentes usando los chips de Fuentes Populares. Para una comparación formal, abre la herramienta en dos pestañas del navegador con diferentes fuentes.
¿Qué es una declaración CSS font-family?
Una declaración CSS font-family indica al navegador qué tipografía usar, con alternativas. Ejemplo: font-family: 'Roboto', sans-serif;