Visor de tipografías

• Previsualiza cualquier Google Font al instante: nuestro visor carga las Google Fonts a demanda y renderiza tu texto personalizado en tiempo real. Escribe cualquier texto, elige entre más de 80 tipografías y comprueba cómo se ve en cualquier tamaño y grosor, sin recargar la página.
• Copia el CSS y el @import con un clic: nuestro visor genera la declaración CSS font-family completa y la URL @import de Google Fonts para la tipografía, el tamaño y el grosor seleccionados. Copia cualquiera de las dos con un clic y pégalas directamente en tu hoja de estilos.
• Visor de tipografías online seguro: nuestro visor se ejecuta íntegramente en tu navegador: las tipografías se cargan directamente desde la CDN de Google Fonts y tu texto de previsualización nunca sale de tu dispositivo. No se envía ningún dato a ningún servidor.
• Visor de tipografías sin instalación y 100 % gratis: úsalo directamente en cualquier navegador, sin descargas, cuenta ni anuncios. Explora más de 80 Google Fonts en 5 categorías -Sans Serif, Serif, Display, Monospace y Handwriting- totalmente gratis para siempre.

• Diseño web y de interfaces: los diseñadores usan nuestro visor para evaluar Google Fonts en proyectos web antes de decidirse. Previsualiza tu titular o tu texto de cuerpo real en varias tipografías lado a lado para encontrar el encaje tipográfico perfecto.
• Identidad de marca y diseño de logotipos: usa nuestro visor para probar tipografías display y serif para nombres de marca, eslóganes y conceptos de logotipo. Comprueba cómo se ve tu texto de marca en Bebas Neue, Playfair Display o Cinzel antes de elegir.
• Desarrollo frontend: los desarrolladores frontend usan nuestro visor para encontrar rápidamente la Google Font adecuada y copiar la URL @import y la declaración CSS. Sáltate la web de Google Fonts y obtén el código que necesitas en segundos.
• Diseño de contenido y blogs: los creadores de contenido y blogueros usan nuestro visor para elegir tipografías de cuerpo legibles y tipografías de titular llamativas. Previsualiza el título real de tu artículo o un párrafo en Merriweather, Lora o Spectral.
• Diseño de presentaciones y documentos: usa nuestro visor para encontrar tipografías que funcionen bien en presentaciones, informes y documentos. Previsualiza el título de tu diapositiva o el texto de cuerpo en distintos grosores para asegurar la legibilidad a cualquier tamaño.
• Aprender tipografía: los estudiantes y desarrolladores que aprenden tipografía usan nuestro visor para entender cómo se ven y se sienten las distintas categorías. Compara tipografías Sans Serif, Serif, Display y Monospace lado a lado.

Un visor de tipografías te permite escribir texto propio y verlo renderizado con distintas tipografías antes de elegir una para tu proyecto. Nuestro visor se centra en Google Fonts, una biblioteca de tipografías gratuita y de código abierto con más de 1500 tipos usados por millones de sitios web. En lugar de navegar por la web de Google Fonts y adivinar cómo queda una tipografía con tu contenido real, nuestro visor te deja escribir tu titular, tu texto de cuerpo o el nombre de tu marca y verlo al instante en cualquiera de más de 80 Google Fonts populares de cinco categorías: Sans Serif, Serif, Display, Monospace y Handwriting.

1. Escribe tu texto de previsualización: introduce cualquier texto en el campo de previsualización, ya sea tu titular real, tu texto de cuerpo, el nombre de tu marca o el clásico pangrama «The quick brown fox». La previsualización se actualiza al instante mientras escribes.
2. Explora y selecciona una tipografía: busca por nombre o filtra por categoría. Haz clic en cualquier tipografía de la lista para seleccionarla: se carga directamente desde la CDN de Google Fonts y se renderiza en tu navegador. Ajusta el tamaño y el grosor con los controles para ver exactamente cómo queda en tu caso de uso.
3. Copia el CSS: cuando hayas encontrado la tipografía adecuada, copia con un clic la declaración CSS font-family o la URL @import de Google Fonts. Pega el @import en tu hoja de estilos y el font-family en tus reglas CSS.

• Sans Serif: tipografías limpias y modernas sin trazos decorativos, ideales para texto de cuerpo, interfaces y pantallas. Ejemplos: Inter, Roboto, Poppins, Montserrat. Las mejores para la legibilidad en pantalla.
• Serif: tipografías con pequeños trazos decorativos al final de los caracteres, clásicas y con autoridad. Ejemplos: Playfair Display, Merriweather, Lora. Las mejores para editorial, impresión y lectura de textos largos.
• Display: tipografías decorativas y expresivas diseñadas para titulares grandes e impacto visual. Ejemplos: Bebas Neue, Anton, Pacifico. Las mejores para titulares, logotipos y textos cortos de exhibición.
• Monospace: tipografías de ancho fijo en las que cada carácter ocupa el mismo espacio horizontal. Ejemplos: JetBrains Mono, Fira Code, Source Code Pro. Las mejores para código, terminales y contenido técnico.

Copia la URL @import desde nuestro visor de tipografías y pégala al principio de tu archivo CSS. Luego usa la declaración font-family en tus reglas CSS. En proyectos Next.js, usa el paquete next/font/google para un rendimiento óptimo: autoaloja la tipografía automáticamente y elimina la petición de red externa. En proyectos HTML simples, añade la etiqueta <link> en tu <head> en lugar del @import para mejorar el rendimiento.