Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

mejores-google-fonts-93-1.svg

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

En este artículo te quiero enseñar las 40 mejores Google Fonts para mejorar el diseño de tu página web. Google hace de todo, y ha creado hasta sus propias tipografías, las llamadas Google Fonts. Voy a enseñarte que son, cuales son las mejores, y cómo deben combinarse. Al final del post también verás cómo puedes usar las mejores Google Fonts para mejorar el diseño de tu página web.

 

Las 40 mejores Google Fonts para mejorar el diseño de tu página webGoogle Fonts: qué son y por qué usarlas

Google Fonts es un catálogo con mas de 700 fuentes tipográficas totalmente gratuitas y de código abierto. Esto significa que podrás utilizar cualquier fuente del amplio catálogo de Google en tu página web o blog.

Esto es un gran avance dada la versatilidad que nos ofrece en cuanto al diseño de páginas web. Anteriormente sólo podían usarse unas pocas tipografías en diseño web, las llamadas “fuentes seguras” (Times New Roman, Arial, Andale mono…). Si se usaban estas fuentes se corría el riesgo de que el navegador no las mostrase correctamente.

Antes de tener esta posibilidad, muchos diseñadores que querían utilizar otras fuentes las ponían como imagen. Esto no es lo mejor para el posicionamiento y por suerte a día de hoy no es necesario.

 

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Las 40 mejores Google Fonts para mejorar el diseño de tu página webLas 40 mejores Google Fonts

Alegreya

Una de las mas populares, perfecta para el cuerpo de texto de cualquier publicación o contenido digital. Puedes encontrarla en 6 versiones diferentes.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Alegreya
Cuerpo: Source Sans Pro

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Asap

Esta tipografía es de las llamadas “de palo seco”. Viene con los bordes redondeados y es muy limpia.

Ver tipografía en Google Fonts
Combinación recomendada:
Título: Flamenco
Cuerpo: Asap

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Lato

Lato es tuna tipografía elegante y de las mas populares de Google Fonts. De palo seco, con 10 variantes y 5 pesos, desde una ultra fina (Thin), hasta las mas negrita (Black).

Ver fuente en Google Fonts
Combinación recomendada:
Título: Lato
Cuerpo: Merriweather

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Merriweather

Merriweather es una tipografía que funciona muy bien para el cuerpo de texto. Funciona muy bien cuando se combina con su compañera Merriweather Sans.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Merriweather
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Roboto

Creada por Christian Robertson, es una familia de fuentes muy completa. Cuenta con varias versiones, mono, condensed y Slab; ésta última con serifa. La versión normal es muy similar a la Helvetica o la Din. Perfecta para titulares en sus diferentes pesos.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Roboto
Cuerpo: Nunito

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Raleway

Tipografía creada por Matt McInerney y con multitud de variantes. Es perfecta para los cuerpos de texto por sus curvas abiertas y redondeadas, ya que facilita mucho la legibilidad. Tiene hasta 8 pesos diferentes y sus correspondientes variaciones en cursiva. Han creado además una versión punteada (dotted) que puedes ver y descargar desde la web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Raleway
Cuerpo: Roboto

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Montserrat

Montserrat es una fuente creada por Julieta Ulanovsky, quien se inspiró en los carteles y marquesinas típicos del barrio de Montserrat en Buenos Aires y quiso crear este tipo de letra con dos pesos diferentes, regular y bold.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Cardo

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Open Sans

Open sans es una fuente de palo seco diseñada por Steve Patterson y lanzada en 2011. Tiene 5 pesos diferentes incluyendo cursivas. Esto hace a Open Sans una de las tipografías mas versátiles que hay, ya que tiene infinidad de aplicaciones. en diseño web se ve constantemente ya que ha ido muy unida a la inclusión de Google Fonts en WordPress y al auge del flat design.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Open Sans
Cuerpo: Lora

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Amaranth

Amaranth es una tipografía de aspecto moderno con remates curvados y redondeados. Fue diseñada por Genie Todt, que buscaba mejorar su legibilidad con toques de estructura cursiva.

Ver fuente en Google FontsCombinación recomendada:
Título: Amaranth
Cuerpo: Titillium Web

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Gentium

Tipografía Serif muy elegante y de tipo romano. Tiene bastante personalidad por si misma y combina muy bien con tipografías sans-serif, tanto para títulos como para cuerpo de texto.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Open Sans
Cuerpo: Gentium

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Noto Sans

Es una evolución de la tipografía Droid, y tiene soporte en mas de 30 idiomas. También ocurre lo mismo con su versión Serif, por lo que es una fuente muy práctica.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat (Mayúsculas)
Cuerpo: Noto Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Ubuntu

Ubuntu ha cogido gran fuerza y se ve cada vez mas aplicada en muchas páginas web. Se trata de una tipografía sans-serif que ha sido modificada manualmente para mejorar su legibilidad en pantallas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Ubuntu
Cuerpo: Lora

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Quicksand

Tipografía moderna sans-serif que destaca por tener  los extremos totalmente redondeados. Además también incorpora varios pesos y una variante a base de puntos, para diseños más creativos.

Ver fuente en  Google Fonts
Combinación recomendada:
Título: Quicksand
Cuerpo: EB Garamond

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Droid Sans

Droid Sans es una fuente sans-serif diseñada por Steve Matteson. Está optimizada con el fin de ser amigable con dispositivos móviles, web y otros textos que se muestren en pantallas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Droid Sans
Cuerpo: Cabin

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Signika

Inicialmente fue creada para usarse en señalización, pero es aplicable a todo tipo de diseños debido a su ritmo y legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Signika
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Josefin Slab

Josefin Slab es una tipografía que se inspira en las tendencias de 1930 que destacaban por sus formas geométricas. Es una fuente genial para utilizar en titulares y cabeceras, pero también encaja perfectamente como cuerpo de texto.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Josefin Slab
Cuerpo: Josefin Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Vollkorn

Vollkorn es una fuente con una serifa prominente y con cuerpo. Fue diseñada para ser discreta y funcionar en cualquier tipo de publicaciones escritas, ya sea en papel o en pantalla. Es perfecta para usar en titulares y tiene varios pesos incluyendo negritas y cursivas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Vollkorn
Cuerpo: Exo

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Bree Serif

Fue diseñada en 2008 por Verónica Burian y José Scaglion. Esta tipografía triunfó desde su primer momento. Es muy buena opción para usar en Titulares y combina muy bien con fuentes sans-serif como Lato. Es muy estética y queda muy bien incluso cuando se reduce su tamaño.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Bree Serif
Cuerpo: Lora

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Poppins

Poppins es una tipografía geométrica sans-serif creada por Indian Type Foundry en 2014. Está disponible en 5 pesos diferentes, pero desafortunadamente no incluye una variante en cursiva. Es una fuente que funciona mucho mejor en pantallas, por lo que es perfecta para diseño web, donde se utiliza bastante.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Poppins
Cuerpo: Sintony

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Hind

Hind, al igual que Poppins tiene 5 variantes, y tampoco incluye cursiva. Se utiliza mucho su variante “bold” para encabezados y titulares en diseño web ya que es muy legible en pantallas y en móviles.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Hind
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Playfair Display

Es una fuente con trazos muy contrastados, que la hacen una tipografía moderna y visual muy buena para titulares. Su variante cursiva es muy bonita, elegante y original para títulos y subtítulos. No es recomendable usarla mucho en cuerpo de texto ya que sus trazos tan contrastados pueden hacer que se pierda algo de legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Playfair display

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Space Mono

Space Mono tiene claras influencias del estilo tipográfico geométrico y se puede encontrar en regular y negrita, además de sus correspondientes variantes en cursiva.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Nunito
Cuerpo: Space Mono

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Alegreya Sans

Diseñada por Juan Pablo del Peral, y disponible en 7 pesos diferentes, con sus correspondientes variantes en cursiva. Para muchos es de las mejores fuentes de Google Fonts, y cada vez se ve mas usada en la web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Alegreya Sans
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Lora

Lora es una tipografía de Google Fonts disponible en su modo normal y en negrita, incluyendo sus correspondientes cursivas, las cuales tienen un toque muy caligráfico.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Istock Web
Cuerpo: Lora

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Domine

Domine fue diseñada por Pablo Impallari en Fue creada con el objetivo principal de ser utilizada en textos en la web, por lo que buscaron un diseño que prioritaria la legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Domine

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Roboto Slab

Diseñada por Christian Robertson, es una fuente gratuita de Google Fonts del tipo serif-slab. Fue creada con el fin de ser usada combinada con su modalidad sans-serif, y contiene 4 pesos diferentes, pero no incluye cursivas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Roboto Slab
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Fira Sans

Fira Sans es una fuente open-source creada por Erik Spiekermann y con la contribución de Carrois Type Design. En principio solo fue creada para Firefox OS pero mas tarde fue lanzada en código abierto. Está todavía en desarrollo activo y a día de hoy tiene 9 pesos distintos con cursivas, y una versión monospace.

Ver fuente en Google FontsCombinación recomendada:
Título: Fira Sans
Cuerpo: Lato

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Old Standard TT

Su diseño se inspira en las fuentes serif modernas de finales de los 90 . Está disponible gratis en Google Fonts en normal, cursiva y negrita, pero desafortunadamente no existe un estilo cursiva en negrita.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Cabin
Cuerpo: Old Standard TT

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

PT Serif

Esta Google Font del tipo serif y estilo elegante fue diseñada por tres diseñadores rusos en 2010. Está disponible en normal, cursiva, negrita y negrita cursiva.

Ver fuente en Google Fonts
Combinación recomendada:
Título: PT Sans
Cuerpo: PT Serif

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Oswald

Actualmente es una de las fuentes condensadas más usadas de Google Fonts. Cuenta con seis pesos desde la extra-light hasta la bold. 

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oswald
Cuerpo: Roboto

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Cabin Condensed

Una sans inspirada en en las tipografías de Edward Johnston y Eric Gill, con un toque de modernismo y disponible en cuatro pesos.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Cabin Condensed
Cuerpo: Gentium

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Abril Fatface

Está inspirada en las pesadas fuentes de titulación utilizadas en carteles publicitarios en el siglo XIX en Gran Bretaña y Francia. Es una tipografía con mucha personalidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Abril Fatface
Cuerpo: Raleway

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Dosis

Una fuente redondeada de la familia sans serif. Comenzó con el estilo extra-light y actualmente ya cuenta con más de seis puntos hasta el extra bold.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Dosis
Cuerpo: Open Sans

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Oxygen

La familia de tipos de letra Oxygen se crea como parte del proyecto KDE, un escritorio libre para el sistema operativo GNU + Linu. Disponible en tres estilos:  light, regular y bold. 

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oxygen
Cuerpo: Source Sans Pro

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Karla

Es una de las fuentes más populares tipo sans-serif diseñada por Jonny Pinhor y además cuenta con cuatro variantes. Es ideal para darle un toque diferente y minimalista a tu web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oswald
Cuerpo: Karla

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Pathway Gothic One

Es una sans serif muy similar a Oswald pero con un diseño más fino. Es ideal para títulos. El único inconveniente es que solamente está disponible en un grosor.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Pathway Gothic One
Cuerpo: Sanchez

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Advent Pro

Se trata de una tipografía sans-serif con un estilo moderno y diseñada especialmente para webs. Está disponible en siete variantes y es recomendable hacer uso de ella  especialmente para títulos subtítulos..

Ver fuente en Google Fonts
Combinación recomendada:
Título: Advent Pro
Cuerpo: Oxygen Light

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Maven  Pro

Una fuente con una curvatura única y con movimiento. Su diseño moderno se adapta a cualquier contexto y además es muy legible.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Josefin Slab
Cuerpo: Maven Pro

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

¿Cómo puedes usar estas Google Fonts en tu web?

Si utilizas WordPress, seguramente no tendrás problema ya que la mayoría de las plantillas integran Google Fonts para usar en H1, H2, p, etc. No obstante puede ocurrir que aluna no haya sido incluida. En ese caso podrías utilizar el método «@font-face» para usar otras Google Fonts. Básicamente debes subir a tu servidor las fuentes en diversos formatos, y  a continuación colocar un código CSS en tu hoja de estilos.

Otro método es usando «@import». En este caso, en lugar de cargar las Google Fonts en tu servidor, las llamas desde Google. Eso es muy fácil ya que Google Fonts te da la solución directa. Sólo tienes que hacer click en @import para encontrar el CSS necesario. Debes ponerlo sin los códigos que <style> </style> que aparecen al principio y al final.

 

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Las 40 mejores Google Fonts para mejorar el diseño de tu página webHerramientas para buscar y probar las fuentes de Google Fonts

Además del propio buscador de Google Fonts, con más de 800 familias de fuentes, existen otras alternativas para encontrar y probar tu tipografía perfecta:

 

Type Hero

Con esta herramienta podrás buscar fuentes de Google, añadirles texto e incluso un color para visualizar cómo van a quedar en tu página de WordPress.

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

 

Better Font Finder

Descubre de forma interactiva las tipografías, disponibles en Google Fonts, a través de esta herramienta diseñada por Mattthew. Con Better Font Finder podrás seleccionar  fuentes según su similitud visual. A diferencia del amplio catálogo que ofrece el propio buscador de Google Fonts (más de 800 tipografías) este sitio web solamente cuenta con 70 ejemplos.

 

Google Font Previewer for Chrome

Es una extensión de Google Chrome que te permite visualizar como van a quedar las fuentes directamente en tu web. Es muy útil, sobre todo cuando estás diseñando tu página, para encontrar rápidamente una tipografía de Google Fonts y probarla.

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

 

Beautiful web type

Se trata de un amplío catálogo online, un escaparate de los mejores tipos de letras, del directorio de fuentes web de Google, aplicados en ejemplos. Para saber la fuente que se está usando simplemente tienes que hacer clic encima y te llevará al directorio de Google Fonts.

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

Las 40 mejores Google Fonts para mejorar el diseño de tu página web¿Nos recomiendas alguna otra Google Font que sea idónea para páginas web?

Esta ha sido nuestra selección de Google Fonts, pero a lo mejor tú conoces alguna otra que puedes recomendarnos para mejorar el diseño de las páginas web. ¡Ánimo! Aporta o pregúntanos en los comentarios.

Si quieres mejorar tu marketing, aquí te proponemos 615 acciones de marketing y publicidad según 25 expertos

Las 40 mejores Google Fonts para mejorar el diseño de tu página web
Te recomendamos leer estos artículos relacionados
Filter by
Post Page
Wordpress y Blogs Marketing SEO Posicionamiento Web Community Manager SEM Marketing Online
Sort by

Las 20 redes sociales que un Community Manager debe conocer y aprender

Como Community Managers debemos aprovechar todas las herramientas disponibles para conectar con nuestra
2024-03-02 00:00:00
socabu

18

15 especialistas cuentan las mejores estrategias de Marketing Digital

15 expertos nos desvelan sus trucos y lo que consideran las mejores estrategias de Marketing digital en el próximo
2024-03-02 00:00:00
patricia

18

Álvaro PeñaLas 40 mejores Google Fonts para mejorar el diseño de tu página web

10 comentarios

Únete a la conversación
  • Guideo - 20 julio, 2017 responder

    Post muy completo de recursos tipográficos para webs. Enhorabuena porque está MUY currado.

    Saludos.

  • Javier Ultra - Páginas web en Tijuana - 1 agosto, 2017 responder

    excelente y abudante info ahora a ponerla en practica saludos maestros

  • Rubén - 24 agosto, 2017 responder

    ¡Interesante post Álvaro! A veces nos ponemos a usar las fuentes «estándar» y nos olvidamos de todas estas que además, son gratuitas y se cargan fácilmente en cualquier sistema WordPress. ¡Gracias por las herramientas!

  • Helena - 29 agosto, 2017 responder

    Hola buenas tardes. Me ha encantado el post. Me surge una duda, he querido entrar en Beautiful web type, la última página que nos recomiendan y no me funciona tal y como decís, veo las combinaciones pero ponéndome enciama no me dice qué tipografía es. Me podríais ayudar?, gracias!
    Helena

  • Blanca - 18 enero, 2018 responder

    Fantástico post. Muy útil y claro. Gracias

  • Paulo - 19 marzo, 2018 responder

    Parabéns pelo post. Está muito bem estruturado! Eu já conhecia o Google fonts e já selecionei algumas fontes. Mas esta é uma ótima seleção. Vou acrescentar à minha lista. 🙂

  • Juan - 3 octubre, 2018 responder

    Y por favor, por qué no nos decís cuál es la que emplea esta web que se lee estupendamente.
    Muchísimas gracias por este excepcional contenido.

    Yader - 20 julio, 2020 responder

    este sitio web utiliza la fuente Mulish

  • German - 9 abril, 2020 responder

    Muy buen contenido, además el diseño de esta página es impecable, felicitaciones!

  • Hernan - 25 enero, 2022 responder

    De bastante utilidad. Gracias

Únete a la conversación

RESPONSABLE: WEB Y CONTENIDOS SL FINALIDAD PRINCIPAL: Envío de nuestros artículos del blog, así como el aviso de nuevas actividades, algunas de las cuales podrían ser de carácter comercial LEGITIMACIÓN: Consentimiento del interesado. DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa u obligación legal DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia y derecho a no ser objeto de decisiones automatizadas. INFORMACIÓN ADICIONAL: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad y Aviso Legal