Existen 1052 familias diferentes de fuentes en Google Font disponibles de forma gratuita (en el momento de escribir este artículo). ¡Eso significa que hay un montón de opciones! Así que no es de extrañar que necesites ayuda para encontrar esa aguja en un pajar con una lista con las mejores fuentes en Google Fonts.
Lo tenemos para ti, y luego también compartiremos algunas de las mejores prácticas para usar Google Fonts en WordPress.
La elección de una fuente es algo más que una opción estética: puede tener un efecto sustancial en las tasas de rebote y las tasas de conversión de tu sitio, especialmente si eliges una fuente difícil de leer. Por lo tanto, vale la pena tomarse un poco de tiempo para elegir la familia de Google Fonts perfecta para tu sitio web, en lugar de utilizar la primera fuente que encuentres.
Si necesitas aún más fuentes, mira nuestra entrada sobre 50+ fuentes modernas para usar en tu sitio web de WordPress.
¿Por qué utilizar Google Fonts?
Hay miles de repositorios de fuentes en Internet, así que ¿qué hace exactamente que Google Fonts sea tan especial?
En primer lugar, es gratuito. Además, las fuentes de Google son mantenidas y entregadas por Google, lo que significa que están garantizadas. Por supuesto, existen un montón de sitios web dudosos en los que puedes descargar fuentes gratuitas, pero ¿quién sabe qué más puedes encontrar con esos archivos?
La calidad de las fuentes de estos sitios web también puede ser a veces cuestionable.
Google ha reunido una selección de más de mil fuentes de alta calidad. Cuando no eres un diseñador gráfico con un ojo perfecto para la tipografía, es una opción más segura.
En segundo lugar, no existen complicadas restricciones de licencia. Todas las fuentes del catálogo de Google Fonts son de código abierto y de uso gratuito en proyectos comerciales. Puedes descargarlas o incrustarlas en tu sitio web, e incluso puedes utilizarlas en proyectos de impresión.
Aunque no hay una licencia unificada, la mayoría de las fuentes del repositorio utilizan la licencia de Open Font.
Otras «fuentes gratuitas» rara vez lo son y vienen acompañadas de toda una serie de confusas restricciones de licencia que podrían ponerte en aprietos si cometes un error. Afortunadamente, Google Fonts no vienen con el mismo bagaje.
Por último, es fácil añadir las fuentes de Google a tu sitio web mediante la API de Google Fonts. También puedes descargarlas individualmente y subirlas a tu servidor web mediante FTP/SFTP.
Aunque las fuentes de Google tienden a ser simples y quizás no tan llamativas como algunas fuentes de pago, sin duda son mejores que las fuentes seguras para la web que vienen preinstaladas con los principales sistemas operativos, las mismas fuentes que todo el mundo ha visto miles de veces.
Qué buscar en una fuente de Google
Si hay algo que debes aprender al diseñar un sitio web, es cómo elegir una fuente de Google Font adecuada para tu proyecto. Una buena tipografía hará bueno o romperá tu sitio.
Puede parecer un detalle sin importancia, pero puede ser la diferencia entre que alguien abandone tu sitio antes de tiempo o se quede para convertirse en un lector o cliente fiel.
La elección de la fuente correcta es algo que los diseñadores gráficos pasan años dominando, pero si se tienen en cuenta algunos principios, se puede elegir una fuente hermosa para tu sitio web.
- Se ajusta a tu marca: Este puede ser el aspecto más crítico. Los mejores sitios web tienen un tipo de letra que muestra tu personalidad al mismo tiempo que es legible y encaja con el diseño actual. Por ejemplo, Apple y Iron Maiden utilizan fuentes muy diferentes, pero ambas se ajustan a su marca.
- Legibilidad: El segundo principio más importante es la legibilidad. Un tipo de letra de fantasía o grunge puede encajar con tu marca, pero si tus visitantes no pueden leerlo, se irán rápidamente. Por lo tanto, tus fuentes deben ser profesionales y legibles.
- Clasificación de los tipos de letra: Aunque hay cientos de maneras de clasificar un tipo de letra, estos son los cinco tipos principales: serif, sans-serif, script, monospace y decorativo. Las fuentes con guión o serif transmiten elegancia, mientras que las fuentes monoespaciadas son populares en los sitios tecnológicos. Conocer estas clasificaciones te darán un mejor punto de partida en tu búsqueda.
- Fuente de pantalla o cuerpo: Las fuentes de visualización son para tamaños grandes, cabeceras o proyectos de impresión. Pueden permitirse ser menos legibles en aras de un diseño único. La directiva principal de las fuentes corporales es la legibilidad, ya que constituirán la mayor parte de tu sitio.
- Estado de ánimo e intención: Al igual que cualquier obra artística, los artistas diseñan fuentes para estados de ánimo y entornos específicos. La mayoría de las fuentes vienen con notas sobre cómo fueron diseñadas y cómo se pueden utilizar. Utilízalas para decidir si la fuente se adapta a tu proyecto.
Las 10 mejores fuentes de Google Fonts en 2024 (Según la Sabiduría Popular)
Entonces, ¿cómo se elabora una lista de las mejores Google Fonts cuando gran parte de esto es subjetivo? No queremos que toda esta lista sea tendenciosa, así que vamos a basarnos en los datos para elaborar una lista de las Google Fonts más populares.
Utilizaremos los análisis de Google Fonts para confiar en la sabiduría popular. Con más de 50 billones de visualizaciones totales de fuentes, Google tiene un poco de datos de los que tirar.
A continuación, iremos un poco más allá de las cifras de popularidad en bruto y elegiremos algunas fuentes HTML prometedoras que están ganando popularidad.
¿Preparado? Vamos a sumergirnos en el tema.
1. Roboto
Roboto, la fuente elegida por Kinsta y que lleva mucho tiempo en el primer puesto, es una fuente sin gracias (sans-serif) de Christian Robertson que Google desarrolló como fuente del sistema para Android. Ahora es muy popular, está disponible en 12 estilos diferentes y aparece muchas veces en los análisis de Google Fonts.
Por ejemplo, Roboto es la fuente más popular. Pero Roboto Condensed es también la sexta fuente más popular, y Roboto Slab también aparece en el número 12.
2. Open Sans
Open Sans Condensed es una fuente muy legible encargada por Google e inspirada en su predecesora Droid Sans. Google utiliza Open Sans en algunos de sus sitios web y en sus anuncios impresos y web. Open Sans Condensed, su fuente hermana, ocupa también el decimotercero puesto en Google Fonts.
3. Lato
Lato es otra opción popular de Łukasz Dziedzic. Su diseño tiene una gran historia que equilibra objetivos contradictorios, lo que da como resultado una fuente sans-serif única y ligera.
4. Montserrat
Montserrat es una fuente sans-serif de Julieta Ulanovsky, que vive en el barrio homónimo de Montserrat en Buenos Aires. Con 18 estilos diferentes que van desde el ligero hasta el pesado, tienes bastante donde elegir.
5. Oswald
Oswald es una fuente sans serif desarrollada originalmente por Vernon Adams. Se diseñó teniendo en cuenta el marcado estilo gótico alternativo, que se hace evidente por sus atrevidos trazos.
6. Source Sans Pro
Source Sans Pro es una fuente sans-serif creada para Adobe y la primera fuente de código abierto de Adobe. Realizada por Paul Hunt, su letra clara la hace limpia y legible.
7. Slabo 27px/13px
Slabo es una fuente con serifa desarrollada por John Hudson de Tiro Typeworks. Esta fuente está diseñada específicamente para ciertos tamaños – 27px o 13px, dependiendo de tus necesidades.
8. Raleway
Con 18 estilos diferentes, Raleway es otra fuente sans-serif de gran tamaño, creada inicialmente por Matt McInerney. Si te gusta Raleway y busca algo único, Raleway Dots ofrece un estilo similar con un enfoque de puntos que puede funcionar para grandes titulares.
9. PT Sans
PT Sans se desarrolló para los tipos públicos de la Federación Rusa y, como tal, incluye tanto caracteres latinos como cirílicos. También hay otras fuentes de la familia PT, incluidas algunas opciones con serifa.
10. Merriweather
El nombre de Merriweather evoca la idea de un diseño agradable, y eso es exactamente lo que pretendían sus diseñadores. Aunque no es tan popular, Merriweather Sans es un proyecto hermano que combina excepcionalmente bien con ella.
Fuentes bonus y emergentes
Según los números, las diez fuentes anteriores son las más populares de Google Fonts. Sin embargo, si solo se muestran las opciones más populares, se hace un flaco favor a las fuentes más prometedoras que no han tenido la exposición necesaria para aparecer en los análisis.
Aquí están algunos de nuestros favoritos que no aparecieron en la parte superior de la analítica.
11. Noto Sans / Serif
Noto es una fuente encargada por Google que viene en versiones serif y sans-serif. Se actualiza con regularidad, y ahora existen más de 100 fuentes Noto, y cada vez hay más.
El objetivo de Noto es abarcar todos los alfabetos y caracteres de varios idiomas, al tiempo que su diseño distintivo armoniza con cientos de familias tipográficas diferentes. Entre estos derivados se encuentran los populares Noto Sans KR y Noto Sans JP.
12. Nunito Sans
Nunito Sans es una opción sans-serif que está creciendo rápidamente en popularidad. Su uso se triplicó entre 2018 y 2019, y cada año es más popular.
13. Concert One
Concert One es un tipo de letra redondeado y grotesco que constituye una opción estelar para los titulares. Su diseño poco convencional seguro que atrae las miradas.
14. Prompt
Prompt es una oferta de sans-serif de la empresa tailandesa de diseño de comunicación Cadson Demak. No tiene bucles (el equivalente tailandés de sans-serif) e incluye tanto caracteres tailandeses como latinos.
15. Work Sans
Work Sans es una fuente sans-serif optimizada para su uso en pantallas. Los diseñadores recomiendan utilizar los estilos de peso medio para cualquier cosa de 14px-48px.
Cómo crear las mejores combinaciones de Google Fonts
Si pensabas que elegir una fuente de Google Fonts era difícil, ¡espera a que intentes emparejarlas en tu sitio! Por suerte, no es un problema que tengas que resolver (a menos que quieras hacerlo). Puedes utilizar un par de formas para conseguir las mejores combinaciones de Google Fonts.
En primer lugar, el propio sitio web de Google Fonts te sugerirá combinaciones populares si te desplazas por la página:
Además, puedes utilizar un sitio como Font Pair para obtener más sugerencias.
Mejores prácticas para el uso de Google Fonts en WordPress
Una vez que hayas encontrado las fuentes perfectas para tu proyecto, aquí tienes algunas prácticas recomendadas para utilizar Google Fonts en WordPress.
Limita el número de pesos de las fuentes que utiliza
Algunas de estas fuentes – como Montserrat y Raleway – vienen con 18 pesos de fuente diferentes. Aunque esto es bueno para ofrecerte opciones, no querrás cargar los 18 pesos en tu sitio de WordPress porque ralentizará los tiempos de carga.
Seguir esta pauta es muy importante.
Para la mayoría de las fuentes, una buena regla general es utilizar tres pesos como máximo:
- Regular
- Cursiva
- Negrita
Muchos sitios de WordPress que vemos hoy en día incluso se saltan la cursiva y se limitan a utilizar dos pesos de fuente diferentes.
Si estás incrustando Google Fonts tú mismo, puedes elegir exactamente qué pesos incluir. Primero, visita una página de fuentes y luego haz clic en Seleccionar este estilo junto a las que quieras.
La mayoría de los temas de WordPress de hoy en día incluyen formas sencillas de elegir las fuentes de Google y los pesos que deseas utilizar. Pero no todos los desarrolladores de temas se centran en el rendimiento. Así que, en algunos casos, puede ser mejor desactivar las Google Fonts en tu tema y añadirlas tú mismo.
Las fuentes variables también están empezando a hacerse populares y son compatibles con todos los navegadores modernos. Son increíbles porque permiten que un archivo de fuente se transforme con diferentes propiedades. Google Fonts tiene un montón de fuentes variables entre las que elegir, e incluso puedes limitar tu búsqueda a esas específicamente.
Considera la posibilidad de alojar las fuentes de Google Fonts localmente
Como alternativa a servir las fuentes desde el servidor de Google, también puedes alojar las fuentes localmente, lo que ofrece ventajas de rendimiento. Sin embargo, recuerda que la mayoría de las fuentes de Google probablemente ya están almacenadas en la caché de los navegadores. Por ello, te recomendamos que realices pruebas de rendimiento.
Si utilizas una fuente premium que no sea de Google, como la fuente «Brandon» que utilizamos en nuestro sitio Kinsta, alojarlas localmente (y servirlas desde tu CDN) es el mejor camino. Para obtener más información sobre este tema, consulta nuestras publicaciones sobre cómo alojar fuentes localmente.
Elige una fuente que se actualice
Las fuentes son como los plugins y los temas de WordPress: con el tiempo, reciben actualizaciones y mejoras para hacerlas aún mejores. Y aunque los riesgos no son tan graves como los de los plugins de WordPress, puede ser beneficioso elegir una fuente que reciba actualizaciones periódicas. Por ejemplo, la familia Noto de Google ha recibido actualizaciones periódicas desde 2014.
Dado que la mayoría de las fuentes de esta lista son populares, es probable que cualquier fuente de esta lista reciba actualizaciones y mejoras periódicas. Y si decides salirte de la lista, asegurarte de que la fuente que elijas sea lo suficientemente popular como para llamar la atención nunca es una mala idea.
No te olvides de la accesibilidad
Según la Organización Mundial de la Salud, de acuerdo con los datos recogidos en 2015, se estima que 253 millones de personas viven con discapacidad visual: 36 millones son ciegos y 217 millones tienen una discapacidad visual de moderada a grave. Además, el número de personas con algún tipo de deficiencia ha ascendido a 2.200 millones a partir de [año].
Al utilizar Google Fonts, puedes controlar su aspecto con CSS, como el color y el tamaño. Así que no olvides seguir las Directrices de Accesibilidad al Contenido en la Web (WCAG) 2.0. Así te asegurarás de que tu contenido sea fácilmente accesible para todos.
El cumplimiento de estas directrices hará que los contenidos sean accesibles a un mayor número de personas con discapacidades, como la ceguera y la baja visión, la sordera y la pérdida de audición, los problemas de aprendizaje, las limitaciones cognitivas, la limitación de movimientos, las discapacidades del habla, la fotosensibilidad y las combinaciones de éstas. – Directrices de Accesibilidad al Contenido en la Web (WCAG) 2.0
Una pauta crítica es el contraste de colores. Nuestro tipo de letra era demasiado claro en un diseño antiguo del sitio web de Kinsta, y los visitantes expresaron su preocupación porque dificultaba la lectura. Lo último que quieres es publicar un contenido increíble para que resulte molesto para los ojos de los usuarios.
Puedes usar una herramienta como el Color Contrast Checker de WebAIM para ver si los colores de tus fuentes pasan las recomendaciones oficiales. Por ejemplo, puedes ver que los colores de las entradas de nuestro blog han pasado la prueba.👍
Cómo añadir Google Fonts a WordPress
Una vez elegidas una o dos fuentes, el último paso es añadirlas a tu sitio web. Gracias a Google Fonts, esta tarea es aún más fácil de lo habitual.
Supongamos que quieres introducir una fuente en tu sitio web. En ese caso, tienes tres opciones: instalar un plugin como Easy Google Fonts o Google Fonts Typography, utilizar la API de Google Fonts para subir la fuente a tu sitio, o descargarla manualmente y alojarla en tu sitio web.
Si necesitas saber cómo cambiar tus fuentes en WordPress, hemos escrito una guía detallada para ayudarte.
Resumen
Las fuentes de Google Fonts son fantásticas y las utilizan millones de sitios web. Hacen que la web sea más agradable, abierta, rápida y accesible a través de sólidos principios tipográficos e iconográficos.
Para garantizar una mejor experiencia general para tus visitantes, te recomendamos que sigas las mejores prácticas de fuentes, como limitar el peso de las mismas, alojarlas localmente (si es necesario) y respetar las directrices de accesibilidad.
Ahora te toca a ti: ¿cuáles son tus fuentes y combinaciones de fuentes favoritas de Google Fonts? Háznoslo saber en los comentarios y no olvides de leer nuestra guía detallada sobre las fuentes de WordPress.
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Poppins es muy usada
¡Buenísimo! Muchas gracias 😊
Muy interesante el mundo de los tipos de letras y las consecuencias de su uso.
Barlow está muy bien.