Tabla de contenidos
By Marine Larmier - Última actualización el
¿Buscas las mejores tipografías de Google Fonts para tu próximo proyecto web?
Las tipografías son una parte fundamental de toda la identidad de marca. Tienes que elegirlas con cuidado según el contexto, porque esa elección afecta a lo que siente tu público (y, por tanto, a su proceso de decisión de compra). Algunas marcas famosas, como Disney o Coca-Cola, se asocian automáticamente a una tipografía en cuanto las mencionamos.
Google tiene más de mil fuentes disponibles en su catálogo, pero hemos hecho el trabajo duro por ti y hemos seleccionado las 11 más populares. ¡Verás que siempre hay una tipografía que se adapta a tus necesidades y a tu nicho!
¿Qué son las Google Fonts?
Google Fonts es una sólida colección de fuentes web que puedes usar en cualquier proyecto, tanto online como offline. Son gratuitas y de código abierto, así que puedes usarlas con fines comerciales en un logotipo, en material impreso, en apps, en materiales didácticos, en libros electrónicos, etc. La ventaja es real: no tendrás que pagar licencias adicionales. Puedes encontrar las Google Fonts perfectas directamente en el directorio con el cuadro de búsqueda y los distintos filtros disponibles:
Las fuentes de Google Fonts no suelen afectar mucho al rendimiento, ya que se obtienen de la red de entrega de contenido (CDN) de Google y se cargarán automáticamente una vez que las hayas subido a tu sitio.
Cómo elegir y usar Google Fonts en WordPress
Al elegir las mejores tipografías web de Google Fonts, deberías tener en cuenta la legibilidad y el estilo visual en función del contexto y del sector.
1. Legibilidad y accesibilidad
La legibilidad describe lo fácil y agradable que le resulta a una persona leer un texto online. En el diseño web, las tipografías influyen directamente en la legibilidad, como puedes ver en nuestro ejemplo de abajo. El artículo escrito con la tipografía «Roboto» parece más fácil de leer que el escrito con la tipografía «Kablammo».
La accesibilidad también está relacionada con el tamaño de la fuente, los colores y los contrastes que vayas a usar en tu página web. Consulta las pautas de accesibilidad para el contenido web para asegurarte de que todo el mundo pueda leer tu tipografía.
2. Estilo visual según el sector
Cada tipografía repercute en las emociones de tus clientes e influye en ellas cuando leen algo online o en la calle. No puedes usar la misma tipografía para un bar de reggae y para un abogado: los códigos de diseño son distintos. Del mismo modo, si quieres crear una web para una escuela infantil, deberías optar por una tipografía amable y desenfadada. Pero si tu cliente es más bien una marca de lujo, la tipografía debería transmitir elegancia y sofisticación.
Por ponerte un ejemplo real, la web de la Fórmula 1 eligió la tipografía perfecta para su sitio de venta de entradas. Al elegir la tipografía adecuada, crearon un estilo visual «de competición» y «automovilístico».
Extra: cómo identificar la tipografía de una web
Puedes instalar la extensión gratuita para Chrome «WhatFont» y pasar el ratón por encima de la tipografía que te guste: identificará la familia tipográfica, el peso, el tamaño y mucho más.
Mejores prácticas para usar Google Fonts en WordPress
Para ayudarte a encontrar las mejores Google Fonts para WordPress e instalarlas en tu sitio, sigue nuestras 3 mejores prácticas, que verás a continuación.
1. Menos es más: usa solo las fuentes que necesites
No te recomendamos usar más de 2 o 3 fuentes para tu identidad de marca; asegúrate también de limitar los pesos de la fuente. Los pesos más populares son regular y negrita; desde el punto de vista del rendimiento, no hace falta tener toda la gama, de extrafina a extranegrita. Todos los pesos de la fuente que no se usen ralentizarán las peticiones a los servidores de Google.
2. Mezcla y combina: asegúrate de que las fuentes combinen bien entre sí
Cuando hayas elegido la mejor fuente de Google Fonts pero quieras añadir otra, asegúrate de que encaje con ella.
- Elige fuentes diferentes (pero no tanto). Esto cuesta explicarlo, así que mejor te lo mostramos con una imagen:
Ten en cuenta la jerarquía de la información: usa una fuente más grande y en negrita para un título, y una más pequeña para un párrafo. Así es como WP Rocket transmite la jerarquía visual mediante la combinación de tipografías:
- Cuando las emparejes, un consejo general es combinar encabezados con serifa y cuerpo de texto sin serifa. Usar dos fuentes con serifa juntas hace que tu texto sea difícil de leer. Si quieres saber más, Webflow explica las principales combinaciones de tipografías que puedes usar en tus trabajos de diseño.
3. Instalación de Google Fonts con un plugin
Una vez que hayas elegido tu fuente o tus fuentes favoritas de Google Fonts, puedes usar un plugin de tipografía para utilizarlas en tu sitio WordPress.
El más popular es el plugin gratuito Google Fonts Typography, que da acceso a todas las Google Fonts en tu sitio WordPress. También incluye una función de vista previa en directo que resulta muy práctica al combinar tipografías:
Conviene saberlo antes de instalar un plugin de tipografía: los page builders populares, como Divi o Elementor, ofrecen Google Fonts en cada elemento de sus respectivos builders. La mayoría de los temas de WordPress también integran Google Fonts en su núcleo para que puedas usar fuentes de su biblioteca.
Ahora que sabes qué buscar en una tipografía, ¡veamos cuáles son las mejores Google Fonts!
Las mejores y más populares tipografías de Google Fonts
Las 11 mejores y más populares tipografías de Google Fonts para un sitio WordPress son las siguientes:
- Roboto
- Open Sans
- Montserrat
- Lato
- Poppins
- Roboto Condensed
- Inter
- Roboto Mono
- Oswald
- Noto Sans
- Raleway
💡Consejo: puedes encontrar esa lista directamente en la web de Google Fonts y ordenar las fuentes por popularidad:
Repasemos la lista de las mejores Google Fonts gratuitas que tienes disponibles para todos tus proyectos personales y comerciales (libres de derechos de autor).
1. Roboto
Roboto es geométrica y, a la vez, tiene unas curvas abiertas y amables.
- Ejemplos de sitios web que la usan: Roboto es la fuente predeterminada de Android y de otros servicios de Google, como Google Play, YouTube, Google Maps y Google Imágenes.
- Tipo de sitio web o sector que la usa: tecnología, aplicaciones web.
2. Open Sans
Una fuente versátil, de aspecto claro y extremadamente legible.
- Ejemplos de sitios web que la usan: WordPress, Dolce & Gabbana, Ikea
- Tipo de sitio web o sector que la usa: versátil, de la tecnología a la moda
3. Montserrat
Originaria de Argentina, se inspiró en carteles, letreros y escaparates pintados.
- Ejemplos de sitios web que la usan: hustlerblueprint.com
- Tipo de sitio web o sector que la usa: elegante y estable, Montserrat es ideal para crear un diseño web sencillo y de aspecto limpio
4. Lato
Una familia tipográfica sin serifa que nació en el verano de 2010 en Polonia. («Lato» significa «verano» en polaco.)
- Ejemplos de sitios web que la usan: Practical-ui.com
- Tipo de sitio web o sector que la usa: muy versátil, es una buena fuente para sitios web porque es legible y viene con distintos estilos. También es excelente para impresión y puede usarse en cualquier parte gracias a su simplicidad geométrica y a su gran altura de la x (los tipos de letra con una altura de la x grande suelen tenerla para mejorar la legibilidad y la facilidad de lectura).
5. Poppins
Las formas geométricas de Poppins mantienen el contenido legible en tamaños pequeños, mientras que sus curvas lucen con fuerza en cabeceras, pantallas grandes o dispositivos móviles.
- Ejemplos de sitios web que la usan: monday.com
- Tipo de sitio web o sector que la usa: perfecta para diseños web y de interfaz (UI) que necesitan estilo, claridad y legibilidad.
6. Roboto Condensed
Forma parte de la mayor familia tipográfica geométrica sin serifa, conocida como la fuente Roboto. «Condensed» significa que los caracteres son más estrechos y más altos.
- Ejemplos de sitios web que la usan: Nintendo Switch
- Tipo de sitio web o sector que la usa: los caracteres altos y el poco espacio entre ellos crean un efecto visual que puede hacer que tu web destaque y se recuerde mejor (perfecta para un eslogan o un título principal).
7. Inter
Otra familia de fuentes variables diseñada especialmente para pantallas de ordenador, porque tiene una gran altura de la x que facilita la lectura de los textos que combinan mayúsculas y minúsculas y de los textos en minúsculas.
- Ejemplos de sitios web que la usan: Jetpack
- Tipo de sitio web o sector que la usa: perfecta para el diseño responsive, ya que garantiza que tu contenido se lea con facilidad en dispositivos más pequeños.
8. Roboto Mono
Roboto Mono es una incorporación monoespaciada a la familia tipográfica Roboto.
- Ejemplos de sitios web que la usan: la misma familia tipográfica que las aplicaciones de Google.
- Tipo de sitio web o sector que la usa: sus fuentes están optimizadas para la legibilidad y el diseño responsive. También es excelente para programar. Es una fuente «friki».
9. Oswald
Un rediseño del estilo clásico que históricamente representaban las tipografías sin serifa «Alternate Gothic».
- Ejemplos de sitios web que la usan: secupress.me
- Tipo de sitio web o sector que la usa: como es alargada, siempre aporta contraste a una combinación tipográfica, y eso la hace ideal para diseñar un logotipo.
10. Noto Sans
Es un diseño limpio y sin adornos, con un tono neutro especialmente adecuado para la lectura online, y una de las mejores fuentes para combinar con otras.
- Ejemplos de sitios web que la usan: dimano.rs
- Tipo de sitio web o sector que la usa: perfecta para descripciones de productos o textos cortos.
11. Raleway
Una fuente fina y elegante, con un peso fino: su famosa «W» la hace destacar de verdad.
- Ejemplos de sitios web que la usan: Storespark.co
- Tipo de sitio web o sector que la usa: perfecta para encabezados, subtítulos o incluso el cuerpo del texto, con un toque elegante.
Ahora que hemos repasado las mejores Google Fonts, veamos cómo optimizarlas para que no ralenticen tu sitio WordPress.
Cómo optimizar Google Fonts
La mejor forma de optimizar Google Fonts en WordPress es usar un plugin de rendimiento.
Pero antes de entrar en las técnicas de optimización, este es el proceso de optimización que te sugerimos seguir:
- Entiende cómo se relacionan las Google Fonts con el rendimiento.
- Audita tu sitio WordPress en PageSpeed Insights para ver en qué situación está tu web en cuanto a fuentes y rendimiento.
- Optimiza las fuentes que lo necesiten, manualmente o con un plugin de rendimiento.
Veamos los pasos principales de un proceso completo de optimización de fuentes.
Paso 1: por qué es importante optimizar Google Fonts para el rendimiento
Las Google Fonts suelen ser archivos pesados con tiempos de carga lentos, lo que afecta al rendimiento percibido y a la experiencia de usuario. Tus Core Web Vitals pueden verse afectadas, lo que significa que tu posicionamiento también podría resentirse. A continuación, te explicamos las consecuencias de las fuentes sin optimizar en el rendimiento.
- Web más lenta: las Google Fonts sin optimizar pueden afectar negativamente al rendimiento de tu web y a la velocidad de carga de tus páginas. Puede que sea menos determinante que la optimización de imágenes, pero recuerda que cada petición que hace tu sitio WordPress significa que el usuario espera más para ver la página.
- Largest Contentful Paint (LCP): calcula cuándo ha terminado de cargarse el contenido principal de la página. Si tu LCP es una cadena de texto, tienes que asegurarte de que tu fuente se descargue y se renderice lo más rápido posible.
- First Contentful Paint (FCP): mide la velocidad percibida de una página, porque marca el primer momento de la cronología de carga en el que el usuario puede ver algo. Así que, si una fuente web no se ha cargado, los navegadores suelen retrasar el renderizado del texto, lo que da como resultado una mala puntuación de FCP. Por el contrario, un FCP excelente tranquiliza a los visitantes, que ven que algo está pasando en la pantalla, y será más probable que esperen.
- Cumulative Layout Shift (CLS): mide la estabilidad visual de una página. Las fuentes web sin optimizar pueden afectar negativamente a la puntuación de CLS, porque la cadena de texto que usa la fuente y el contenido que la rodea pueden desplazarse mientras se carga la fuente web.
📖 ¿Quieres potenciar tus Core Web Vitals y mejorar el rendimiento de tu sitio WordPress? Lee nuestra guía específica, en la que te damos 16 consejos para potenciar el SEO y mejorar las Core Web Vitals.
Ahora que conoces el efecto de unas Google Fonts mal optimizadas en el rendimiento y el SEO, deberías hacer tu propia auditoría con Lighthouse.
Paso 2: diagnóstico de Google Fonts en PageSpeed Insights
Una vez que hayas instalado las Google Fonts, te recomendamos hacer una auditoría de rendimiento en PageSpeed Insights. En el informe, Lighthouse comprueba si sigues las mejores prácticas de optimización de fuentes web. Por lo general, si las fuentes no están optimizadas, es probable que aparezcan estas cinco advertencias:
- Carga previamente las solicitudes clave
- Establece conexión previamente con los orígenes necesarios
- Publica recursos estáticos con una política de caché eficaz
- Asegúrate de que el texto permanece visible mientras se carga la fuente web
- Elimina los recursos que bloqueen el renderizado
Los cinco problemas anteriores repercuten directamente en la velocidad de la página, así que quizá te interese corregirlos cuanto antes para evitar cualquier caída del rendimiento.
Paso 3: optimiza Google Fonts
Una vez que hayas seleccionado las mejores Google Fonts para tu proyecto de diseño web, puedes optimizarlas manualmente o con un plugin o una herramienta como los siguientes:
- WP Rocket: optimiza automáticamente las Google Fonts.
- OMGF: reduce las búsquedas de DNS gracias a la caché y reduce la puntuación de Cumulative Layout Shift. Puedes elegir precargar o dejar de cargar las fuentes que no se usan en tu web.
- Google Fonts Typography: te permite cargar cualquier fuente de Google Fonts en tu sitio WordPress. También ofrece algunas sugerencias de recursos (resource hints) de tipo preconnect.
Preguntas frecuentes
¿Qué es Google Fonts?
Google Fonts es una colección de fuentes web gratuitas y de código abierto que puedes usar en cualquier proyecto, tanto online como offline. Su catálogo reúne más de mil fuentes, y puedes encontrarlas en el directorio de Google Fonts con el cuadro de búsqueda y los filtros disponibles. Como se obtienen de la CDN de Google, no suelen afectar mucho al rendimiento.
¿Google Fonts es gratis?
Sí: las fuentes de Google Fonts son gratuitas y de código abierto, así que puedes usarlas también con fines comerciales sin pagar licencias adicionales. Sirven para un logotipo, material impreso, apps, materiales didácticos o libros electrónicos, y para todos tus proyectos personales y comerciales.
¿Cómo usar Google Fonts en WordPress?
Para usar Google Fonts en WordPress, puedes instalar un plugin de tipografía como Google Fonts Typography, el más popular, que es gratuito y tiene una vista previa en directo para combinar fuentes. Antes de instalarlo, comprueba lo que ya tienes: page builders populares como Divi o Elementor ofrecen Google Fonts en cada elemento, y la mayoría de los temas de WordPress también las integran.
¿Cómo saber qué fuente usa una web?
Instala la extensión gratuita para Chrome WhatFont y pasa el ratón por encima de la tipografía que te interese. La extensión identifica la familia tipográfica, el peso, el tamaño y mucho más.
¿Cómo optimizar Google Fonts en WordPress?
La mejor forma de optimizar Google Fonts en WordPress es usar un plugin de rendimiento, como WP Rocket, que las optimiza automáticamente. Antes, audita tu sitio en PageSpeed Insights para ver qué advertencias relacionadas con las fuentes aparecen. Además, usa solo las fuentes que necesites (no más de 2 o 3) y limita los pesos, porque los que no se usen ralentizarán las peticiones a los servidores de Google.
Conclusión
¡Puedes explorar a mano más de 1400 fuentes o ahorrarte un tiempo valioso y usar nuestra guía para elegir las mejores Google Fonts para tu próximo proyecto! Recuerda que tu tipografía debe estar en sintonía con la personalidad de tu marca: las fuentes con serifa son populares entre las marcas que quieren proyectar una imagen elegante y sofisticada. Por el contrario, si quieres transmitir una imagen más moderna y atrevida, una sin serifa es tu mejor opción.
La regla de oro es no usar demasiadas fuentes y optimizarlas todo lo posible. Si sirves fuentes sin optimizar, habrá una doble repercusión en el rendimiento y en la experiencia de usuario, por el retraso del renderizado del texto y los grandes cambios de diseño. ¡Ten presente esta regla y elige la mejor fuente para tu web!
