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.
Google 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
¿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.
Herramientas 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.
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.
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.
¿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.
10 comentarios
Únete a la conversaciónGuideo - 20 julio, 2017
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
excelente y abudante info ahora a ponerla en practica saludos maestros
Rubén - 24 agosto, 2017
¡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
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
Fantástico post. Muy útil y claro. Gracias
Paulo - 19 marzo, 2018
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
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
este sitio web utiliza la fuente Mulish
German - 9 abril, 2020
Muy buen contenido, además el diseño de esta página es impecable, felicitaciones!
Hernan - 25 enero, 2022
De bastante utilidad. Gracias