Explora un directorio seleccionado de Google Fonts populares con previsualizaciones en vivo, filtra por categoría y busca por nombre, luego copia el CSS listo para pegar y descubre combinaciones de fuentes sugeridas — todo en tu navegador.

Tamaño 34px

Todo se ejecuta en tu navegador — las fuentes se cargan desde Google Fonts solo para la previsualización en vivo, nada se sube, sin registro, completamente gratis.


Acerca de Combinación de fuentes y directorio de Google Fonts

Este directorio de fuentes reúne 80 Google Fonts populares en una sola página con búsqueda, cada una renderizada como un espécimen en vivo con una línea de muestra tipo pangrama, una línea de alfabeto y numerales, y una insignia de categoría. Cubre cinco familias tipográficas (sans-serif, serif, display, manuscrita y monoespaciada) para que puedas comparar formas de letra reales en lugar de adivinar a partir de los nombres.

Cada tarjeta de fuente incluye sugerencias de combinación seleccionadas: fuentes compañeras que funcionan bien juntas para encabezados y texto de cuerpo. Hacer clic en un chip de combinación abre una vista previa que fija un titular en una fuente y un párrafo en la otra, para que puedas juzgar la combinación en contexto antes de comprometerte con ella.

Cuando una fuente o combinación encaja, un clic copia CSS listo para pegar: una línea @import para la hoja de estilos de Google Fonts más la pila font-family correspondiente con un respaldo sensato. Las fuentes se cargan desde Google Fonts solo para las vistas previas en vivo; nada de lo que escribas se sube a ningún lado.

Cómo usar Combinación de fuentes y directorio de Google Fonts

  1. Explora las tarjetas de fuentes, cada una mostrando su nombre, insignia de categoría y texto de muestra en vivo compuesto en la tipografía real.
  2. Usa el cuadro de búsqueda para encontrar una fuente por nombre, o haz clic en un chip de categoría (Sans-serif, Serif, Display, Manuscrita, Monoespaciada) para filtrar la cuadrícula.
  3. Arrastra el control deslizante de tamaño (16-72 px) para previsualizar la línea de muestra en tu tamaño de encabezado o cuerpo objetivo.
  4. Haz clic en un chip "Combina con" o en el botón "Vista previa de combinación" para ver un titular y un párrafo de cuerpo compuestos en la combinación sugerida.
  5. Haz clic en el botón "CSS" de una tarjeta o en la vista previa de combinación para copiar la línea @import y las declaraciones font-family a tu portapapeles.

Preguntas frecuentes

Presenta un conjunto seleccionado de 80 Google Fonts ampliamente usadas distribuidas en cinco categorías: sans-serif, serif, display, manuscrita y monoespaciada. Cada chip de categoría muestra un conteo en vivo para que veas cuántas fuentes coinciden con tu filtro actual.

Cada fuente enumera una o dos fuentes compañeras seleccionadas a mano que contrastan bien con ella, típicamente una tipografía display o serif para encabezados combinada con una fuente de cuerpo legible. La vista previa de combinación muestra los roles exactos de encabezado y cuerpo para cada combinación.

Para una sola fuente, obtienes una línea @import url() para el endpoint css2 de Google Fonts (pesos regular y negrita) más una pila font-family con el respaldo genérico adecuado. Para una combinación, obtienes ambos imports y declaraciones separadas para encabezados y cuerpo.

Sí, las vistas previas en vivo cargan las tipografías desde la CDN de Google Fonts: esa es la única solicitud externa de la página. Tus búsquedas, elecciones de filtro y CSS copiado permanecen en tu navegador; nada se sube ni se almacena.

Sí, explorar, previsualizar combinaciones y copiar CSS son todas acciones gratuitas sin necesidad de cuenta. Las tipografías listadas son Google Fonts, que a su vez son gratuitas para uso personal y comercial bajo sus licencias abiertas.

Puedes ajustar el tamaño del espécimen entre 16 px y 72 px con el control deslizante de tamaño, que actualiza todas las tarjetas a la vez. Eso facilita comparar candidatas en el tamaño exacto que planeas usar para encabezados o texto de cuerpo.

¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.
Informar de un problema

Añade esta herramienta gratuita a tu propio sitio web: copia y pega el código de abajo.