15 mejores fuentes de Google en números en 2021 (más consejos para usarlas)

Hay 1052 familias de fuentes de Google diferentes disponibles de forma gratuita (en el momento de escribir este artículo). ¡Son muchas opciones! Por lo tanto, no es de extrañar que necesite ayuda para encontrar esa aguja en un pajar con una lista de las mejores fuentes de Google.

Lo tenemos para usted, y luego también compartiremos algunas de las mejores prácticas para usar Google Fonts en WordPress.

Elegir una fuente es más que una simple elección estética: puede tener un efecto sustancial en las tasas de rebote y conversión de su sitio, especialmente si elige una fuente que es difícil de leer. Por lo tanto, vale la pena tomarse un poco de tiempo para elegir la familia de fuentes de Google perfecta para su sitio web, en lugar de usar la primera fuente que encuentre.

Si necesita aún más fuentes, consulte nuestra publicación sobre más de 50 fuentes modernas para usar en su sitio web de WordPress.

¿Por qué utilizar Google Fonts?

Hay miles de repositorios de fuentes en Internet, entonces, ¿qué hace que Google Fonts sea tan especial?

En primer lugar, ¡es gratis! Además de eso, las fuentes de Google son mantenidas y entregadas por Google, lo que significa que están garantizadas para ser seguras. Por supuesto, hay muchos sitios web poco fiables donde puede descargar fuentes gratuitas, pero ¿quién sabe qué más recogerá con esos archivos?

La calidad de las fuentes en dichos sitios web a veces también puede ser cuestionable.

Google ha seleccionado 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 restricciones de licencia complicadas. Todas las fuentes del catálogo de Google Fonts son de código abierto y de uso gratuito en proyectos comerciales. Puede descargarlos o incrustarlos en su sitio, e incluso puede usarlos en proyectos de impresión.

Aunque no existe una licencia unificada, la mayoría de las fuentes del repositorio utilizan la licencia de fuente abierta.

Otras «fuentes gratuitas» rara vez son gratuitas y vienen con una gran cantidad de restricciones de licencia confusas que podrían llevarlo a un lío si comete un error. Desafortunadamente, las fuentes de Google no vienen con el mismo equipaje.

Y finalmente, es fácil agregar Google Fonts a su sitio web utilizando la API de Google Fonts. Alternativamente, puede descargarlos individualmente y cargarlos en su servidor web a través de FTP / SFTP.

Si bien las fuentes de Google tienden a ser simples y quizás no tan llamativas como algunas fuentes pagas, ciertamente supera a las fuentes seguras para la web que vienen preinstaladas con los principales sistemas operativos, las mismas fuentes que todos han visto miles de veces antes.

Hay 1052 familias de fuentes de Google diferentes disponibles de forma gratuita … ¿ya te sientes abrumado? 🤯 Reduzca sus opciones con la ayuda de esta publicación 👇Haz clic para tuitear

Qué buscar en una fuente de Google

Si hay algo que debe aprender al diseñar un sitio web, es cómo elegir una fuente de Google adecuada para su proyecto. Una buena tipografía hará que tu sitio sea bueno o malo.

Puede parecer un detalle sin importancia, pero puede ser la diferencia entre que alguien abandone su sitio antes de tiempo o se quede para convertirse en un lector o cliente leal.

Elegir la fuente correcta es algo que los diseñadores gráficos pasan años dominando, pero teniendo en cuenta algunos principios, puede elegir una fuente hermosa para su sitio web.

• Se adapta a su marca: Este puede ser el aspecto más crítico. Los mejores sitios web tienen una fuente que muestra su personalidad, sin dejar de ser legible y encajar con el diseño actual. Por ejemplo, Apple e Iron Maiden usan fuentes muy diferentes, pero ambas se ajustan a su marca.
• Legibilidad: El segundo principio más importante es la legibilidad. Una fantasía estrafalaria o una fuente sucia pueden sin duda adaptarse a su marca, pero si sus visitantes no pueden leerla, se irán rápidamente. Por lo tanto, sus fuentes deben ser profesionales y legibles.
• Clasificación de fuentes: Si bien hay cientos de formas de clasificar una fuente, estos son los cinco tipos principales: serif, sans-serif, script, monoespacio y decorativo. Una fuente de escritura o serif transmite elegancia, mientras que las fuentes de espacio único son populares en los sitios de tecnología. Conocer estas clasificaciones le dará un mejor punto de partida en su búsqueda.
• Fuente de pantalla o cuerpo: Las fuentes de visualización son para tamaños grandes, encabezados o proyectos de impresión. Pueden permitirse el lujo de ser menos legibles en aras de un diseño único. La directiva principal de las fuentes del cuerpo es la legibilidad, ya que constituirán la mayor parte de su sitio.
• Estado de ánimo e intención: Al igual que con cualquier trabajo artístico, los artistas diseñan fuentes para ambientes y entornos específicos. La mayoría de las fuentes vendrán con notas sobre cómo fueron diseñadas y cómo puede usarlas. Úselos para decidir si la fuente se adapta a su proyecto.

Las 10 mejores fuentes de Google en 2021 (según la sabiduría de las multitudes)

Entonces, ¿cómo se desarrolla una lista de las mejores fuentes de Google cuando tanto de esto es subjetivo? No queremos que toda esta lista esté sesgada, por lo que vamos a utilizar los datos para crear una lista de las fuentes de Google más populares.

Usaremos el análisis de Google Fonts para confiar en la sabiduría de las multitudes. Con más de 50 billones de vistas de fuentes en total, Google solo tiene un poco de datos para extraer.

Luego, iremos un poco más allá de los números de popularidad en bruto y elegiremos algunas fuentes HTML emergentes que están ganando popularidad.

¿Listo? ¡Vamos a sumergirnos!

1. Roboto

Roboto, el lugar número uno de larga duración y la fuente de elección de Kinsta, es una oferta sans-serif de Christian Robertson que Google desarrolló como la fuente del sistema para Android. Ahora es enormemente popular, viene en 12 estilos diferentes y hace múltiples apariciones 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 altamente legible encargada por Google e inspirada en su predecesor Droid Sans. Google utiliza Open Sans en algunos de sus sitios web y sus anuncios impresos y web. Open Sans Condensed, su fuente hermana aquí, también ocupa el decimotercer lugar más popular en Google Fonts.

3. Lato

Lato es otra opción popular de Łukasz Dziedzic. Tiene toda la historia detrás de su diseño, equilibrando objetivos en conflicto, lo que resulta en una fuente sans-serif única y liviana.

4. Montserrat

Montserrat es una fuente sans-serif de Julieta Ulanovsky, quien vive en el barrio homónimo de Montserrat en Buenos Aires. Con 18 estilos diferentes que van desde ligeros hasta pesados, tienes muchas opciones para elegir.

5. Oswald

Oswald es una fuente sans-serif desarrollada originalmente por Vernon Adams. Fue diseñado con el distintivo estilo gótico alternativo en mente, que se hizo evidente por sus trazos audaces.

6. Fuente Sans Pro

Source Sans Pro es una fuente sans-serif creada para Adobe y la primera fuente de código abierto de Adobe. Fabricado por Paul Hunt, sus letras ligeras lo hacen limpio y legible.

7. Slabo 27px / 13px

Slabo es una fuente serif desarrollada por John Hudson de Tiro Typeworks. Esta fuente está diseñada específicamente para ciertos tamaños, ya sea 27px o 13px, según sus necesidades.

8. Raleway

Con 18 estilos diferentes, Raleway es otra fuente sans-serif de familia numerosa, creada inicialmente por Matt McInerney. Si le gusta Raleway y está buscando algo único, Raleway Dots ofrece un estilo similar con un enfoque punteado que puede funcionar para grandes titulares.

9. PT Sans

PT Sans se desarrolló para los tipos públicos de la Federación de Rusia y, como tal, incluye caracteres latinos y cirílicos. También hay varias otras fuentes en la familia PT, incluidas algunas opciones serif.

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 él.

Fuentes de bonificación + principiantes

Según los números, las diez fuentes anteriores son las fuentes de Google más populares. Pero mostrar solo las opciones más populares perjudica a las excelentes fuentes emergentes que no han tenido la exposición para aparecer en el analítica.

Estos son 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. Está recibiendo actualizaciones periódicas, y ahora hay más de 100 fuentes Noto, ¡y hay más que vienen todo el tiempo!

El objetivo de Noto es cubrir todos los alfabetos y caracteres de varios idiomas, mientras que su diseño distintivo armoniza en cientos de familias de fuentes diferentes. Estos derivados incluyen 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 solo se vuelve más popular cada año.

13. Concierto uno

Concert One es una tipografía grotesca redondeada que es una opción estelar para los titulares. Su diseño poco convencional seguramente llamará la atención.

14. Aviso

Prompt es una oferta sans-serif de la firma tailandesa de diseño de comunicaciones Cadson Demak. No tiene bucles (el equivalente tailandés de sans-serif) e incluye caracteres tailandeses y latinos.

15. Work Sans

Work Sans es una fuente sans-serif optimizada para su uso en pantallas. Los diseñadores recomiendan usar los estilos de peso medio para cualquier cosa desde 14px-48px.

Cómo crear las mejores combinaciones de fuentes de Google

Si pensaba que intentar elegir una fuente de Google Fonts era difícil, espere hasta que intente emparejarlas en su sitio. Afortunadamente, este no es un problema que deba resolver (a menos que lo desee). Puede utilizar un par de formas de encontrar las mejores combinaciones de fuentes de Google.

Primero, el sitio web de Google Fonts sugerirá emparejamientos populares si se desplaza hacia abajo en la página:

Más allá de eso, también puede usar un sitio como Font Pair para obtener más sugerencias.

Prácticas recomendadas para el uso de fuentes de Google en WordPress

Una vez que encuentre las fuentes perfectas para su proyecto, estas son algunas de las mejores prácticas para usar Google Fonts en WordPress.

Limite el número de pesos de fuente que utiliza

Algunas de estas fuentes, como Montserrat y Raleway, vienen con 18 pesos de fuente diferentes. Si bien eso es bueno para brindarle opciones, no desea cargar los 18 pesos en su sitio de WordPress porque ralentizará sus tiempos de carga.

¡Seguir esta guía es muy importante!

Para la mayoría de las fuentes, una buena regla general es usar tres pesos como máximo:

Muchos sitios de WordPress que vemos hoy en día incluso se saltan la cursiva y solo usan dos pesos de fuente diferentes.

Si está incorporando fuentes de Google usted mismo, puede elegir exactamente qué pesos incluir. Primero, visite una página de fuentes y luego haga clic en Seleccione este estilo junto a los que quieras.

La mayoría de los temas de WordPress actuales incluyen formas fáciles de elegir qué fuentes y pesos de Google desea usar. Pero no todos los desarrolladores de temas se centran en el rendimiento. Entonces, en algunos casos, podría ser mejor deshabilitar las fuentes de Google en su tema y agregarlas usted mismo.

Las fuentes variables también están comenzando a ser populares y son compatibles con todos los navegadores modernos. Estos son increíbles porque permiten que un archivo de fuente se transforme con diferentes propiedades. Google Fonts tiene muchas fuentes variables para elegir, e incluso puede limitar su búsqueda a aquellas específicamente.

Considere alojar fuentes de Google localmente

Como alternativa a la entrega de fuentes desde el servidor de Google, también puede alojar fuentes localmente, lo que ofrece beneficios de rendimiento. Sin embargo, recuerde que la mayoría de las fuentes de Google probablemente ya estén almacenadas en caché en los navegadores de las personas. Por eso le recomendamos que haga sus pruebas de rendimiento.

Si está utilizando una fuente premium distinta a las fuentes de Google, como la fuente «Brandon» que usamos en nuestro sitio de Kinsta, alojarlas localmente (y servirlas desde su CDN) es la mejor ruta. Para obtener más información sobre este tema, consulte nuestras publicaciones sobre cómo alojar fuentes localmente.

Elija una fuente que reciba actualizaciones

Las fuentes son como los complementos y temas de WordPress: con el tiempo, reciben actualizaciones y mejoras para mejorarlas aún más. Y aunque lo que está en juego no es tan grave como los complementos de WordPress, aún 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.

Debido a que la mayoría de las fuentes de esta lista son populares, probablemente sea una buena apuesta que cualquier fuente de esta lista reciba actualizaciones y mejoras periódicas. Y si decide salir de la lista, asegurarse de que la fuente que elija 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, según los datos recopilados en 2015, se estima que 253 millones de personas viven con discapacidad visual: 36 millones son ciegas y 217 millones tienen discapacidad visual de moderada a grave. Además, el número de personas con algún tipo de discapacidad ha aumentado a 2.200 millones a partir de 2021.

Cuando usa Google Fonts, puede controlar cómo se ve con CSS, como el color y el tamaño. Por lo tanto, no olvide seguir las Pautas de accesibilidad al contenido web (WCAG) 2.0. Eso asegurará que su contenido sea fácilmente accesible para todos.

Seguir estas pautas hará que el contenido sea accesible para una gama más amplia de personas con discapacidades, que incluyen ceguera y baja visión, sordera y pérdida de audición, problemas de aprendizaje, limitaciones cognitivas, movimiento limitado, discapacidades del habla, fotosensibilidad y combinaciones de estos. – Pautas de accesibilidad al contenido web (WCAG) 2.0

Una pauta fundamental es el contraste de color. Nuestra fuente era demasiado clara en un diseño anterior del sitio web de Kinsta, y los visitantes expresaron sus preocupaciones, ya que dificultaba la lectura. ¡Lo último que quieres hacer es publicar contenido increíble, solo para que se convierta en una tensión para los ojos de las personas!

Puede utilizar una herramienta como el Comprobador de contraste de color de WebAIM para ver si los colores de su fuente pasan las recomendaciones oficiales. Por ejemplo, puede ver que los colores en las publicaciones de nuestro blog ahora pasaron la prueba. 👍

Cómo agregar fuentes de Google a WordPress

Con una fuente o dos seleccionadas, el paso final es agregarla a su sitio web. Gracias a Google Fonts, esta tarea es incluso más sencilla de lo habitual.

Suponga que desea incluir una fuente en su sitio web. En ese caso, tiene tres opciones: instalar un complemento como Easy Google Fonts o Google Fonts Typography, usar la API de Google Fonts para cargar la fuente en su sitio o descargarla manualmente y alojarla en su sitio web.

Si necesita saber cómo cambiar sus fuentes en WordPress, hemos escrito una guía detallada para ayudarlo.

Elegir una fuente es más que una simple elección estética: puede tener un efecto sustancial en las tasas de rebote y conversión de su sitio 😲 Empiece aquí ⬇️Haz clic para tuitear

Resumen

Las fuentes de Google 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 principios sólidos de tipografía e iconografía.

Para garantizar una mejor experiencia general para sus visitantes, le recomendamos que siga las mejores prácticas de fuentes, como limitar el peso de las fuentes, alojar fuentes localmente (si es necesario) y cumplir con las pautas de accesibilidad.

Ahora le toca a usted: ¿cuáles son sus fuentes y pares de fuentes favoritos de Google Fonts? Háganos saber a continuación en los comentarios, ¡y no olvide leer nuestra guía detallada sobre fuentes de WordPress!