Al momento de escribir este articulo, hay 884 diferentes familias de disponibles de Google Fonts sin costo alguno. ¡Esas son muchas opciones! Razón por la cual podrá querer hablar con alguien que le ayude a encontrar la aguja en el pajar con una lista de las mejores Google Fonts.

Ya la tenemos para usted, y después le compartiremos algunas de las mejores prácticas para utilizar las Google Fonts en WordPress.

Elegir una fuente es algo más que una elección de estética – puede tener un efecto real en las tasas de rebote de su sitio y tasas de conversión, especialmente si usted elige una fuente que sea difícil de leer para su lector.

Básicamente, vale la pena tomarse un poco de tiempo para ver las mejores familias de fuente en Google para sus sitio web, ¡en lugar de agarrar la primera con la que se encuentre!

Las 10 Mejores Google Fonts en 2019

Así que, ¿cómo saca uno una lista de las mejores Google Fonts cuando mucho de esto es subjetivo? No queremos que toda esta lista sea subjetiva, así queusaremos datos para crear una lista de las mejores Google Fonts.

Básicamente, utilizaremos el Google Fonts Analytics para confiar en la sabiduría de la gente. Con más de 23 trillones de vistas a las fuentes, Google tiene un par de datos que podremos utilizar. 😉

Luego, iremos más allá de los números de popularidad en bruto y elegir algunas fuentes emergentes que están creciendo rápidamente. ¿Listo? Empecemos.

1. Roboto

Fuente Roboto de Google

Fuente Roboto de Google

Robot es una oferta de sans-serif de Christian Robertson que fue desarrollada por Google como el sistema de fuente para Android. Ahora es extremadamente popular, viene con 12 estilos distintos, y tiene varias apariciones en el Google Font’s Analytics. Por ejemplo, Roboto es la fuente más popular. Pero Roboto Condensed también es la sexta fuente más popular, ¡y Robot Slab también aparece en el número 13!

2. Open Sans

Fuente Open Sans de Google

Fuente Open Sans de Google

Open Sans es una fuente sans-serif desarrollada por Steve Matteson. Google utiliza Open Sans en algunos de sus sitios, al igual que en sus anuncios impresos y digitales.

3. Lato

Fuente Lato de Google

Fuente Lato de Google

Lato es otra oferta popular de sans-serif, esta vez de Lukasz Dziedzic.

4. Slabo 27px/13px

Fuente Slabo de Google

Fuente Slabo de Google

Slabo es una fuente serif desarrollada por John Hudson de Tiro Typeworks. Lo que hace única a esta fuente es que fue específicamente diseñada para ser usada en ciertos tamaños – siendo a 27px o 13px dependiendo de sus necesidades.

5. Oswald

Fuente Oswald de Google

Fuente Oswald de Google

Oswald es una fuente sans-serif originalmente desarrollada por Vernon Adams.

6. Source Sans Pro

Fuente Source Sans Pro de Google

Fuente Source Sans Pro de Google

Source Sans pro es una fuente sans-serif de Paul Hunt que fue creada por Adobe y fue la primera fuente open source de Adobe.

7. Montserrat

Fuente Montserrat de Google

Fuente Montserrat de Google

Montserrat es una fuente sans-serif de Julieta Ulanovsky, quien vive en el vecindario epónimo de Montserrat de Buenos Aires. Con 18 estilos distintos, tiene mucho de donde elegir.

8. Raleway

Fuente Raleway de Google

Fuente Raleway de Google

Con 18 estilos distintos, Raleway es otra gran familia de la fuente de sans-serif, inicialmente creada por Matt Mclnerney. Si a usted le gusta el Raleway y está buscando algo único, Raleway Dots ofrece un estilo similar con un enfoque salpicado que puede funcionar para grandes encabezados.

9. PT Sans

Fuente PT Sans de Google

Fuente PT Sans de Google

PT Sans fue desarrollada por la Federación Rusa de Tipografía Pública y, como tal, incluye versiones de los caracteres latinos y cirílicos. También hay otras fuentes en la familia PT, incluyendo las opciones de serif.

10. Lora

Fuente Lora de Google

Fuente Lora de Google

Lora es una fuente serif popular que fue diseñada para funcionar en una pantalla y de manera impresa.

Fuentes Adicionales + Las Más Recientes

Por los números, las diez fuentes anteriores son las más populares de Google. Pero sólo mostrar las opciones más populares no es correcto cuando tenemos fuentes que han salido recientemente que no han recibido la exposición necesaria para salir en los analytics.

Aquí tenemos algunos de nuestros favoritos que no aparecieron en el tope de los analytics.

11. Noto Sans / Serif

Fuente Noto Sans de Google

Fuente Noto Sans de Google

Noto es una fuente comisionada por Google que viene en versiones de serif y sans-serif. Está recibiendo actualizaciones regulares, y ya cuenta con más de 100 fuentes NOTO, ¡con más saliendo todo el tiempo!

12. Nunito Sans

Fuente Nunito Sans de Google

Fuente Nunito Sans de Google

Nunito Sans es una opción sans-serif que va en rápido crecimiento (se ha triplicado su uso desde el año pasado).

13. Concert One

Fuente Concert One de Google

Fuente Concert One de Google

Concert One es un tipo de letra redondeado y grotesco que lo hace una opción estelar para encabezados.

14. Prompt

Fuente Prompt de Google

Fuente Prompt de Google

Prompt es una oferta de sans-serif de la firma de diseño de comunicación Thai, Cadson Demak.

15. Work Sans

Fuente Work Sans de Google

Fuente Work Sans de Google

Work Sans es una fuente sans-serif que fue optimizada para ser usada en pantallas. Los diseñadores recomiendan utilizar estilos medianos para cualquier cosa desde 14px-48px.

¿Cómo Crear las Mejores Combinaciones de Google Fonts?

Si usted pensaba que elegir una fuente de Google Fonts era difícil, espere hasta que tenga que juntar dos en su sitio. Afortunadamente, esto no es un problema que tenga que resolver por sí solo, a menos que así lo quiera. Hay un par de formas para obtener las mejores combinaciones posibles de Google Fonts.

Primero, el sitio de Google Fonts sugiere algunas parejas populares si se dedica a buscar.

Donde encontrar parejas de Google Fonts

Donde encontrar parejas de Google Fonts

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

Las Mejores Prácticas para Utilizar Google Fonts en WordPress

Una vez que haya encontrado las fuentes perfectas de Google Fonts, aquí le tenemos algunas de las mejores prácticas para utilizarlos en WordPress.

Límite el Número de Pesos de Fuente que Utilice

Algunas de estas fuentes – como la de Montserrat y Raleway – vienen con 18 pesos distintos de fuente. Aunque siempre es bueno tener una opción, no querrá cargar todos los 18 pesos en su sitio de WordPress porque hará más lento el tiempo de carga. ¡Esto es muy importante!

Para la mayoría de las fuentes, una buena regla a seguir es utilizar como máximo 3 pesos:

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características
  • Regular
  • Itálica
  • Negrita

Muchos sitios de WordPress que vemos ahora se están evitando usar itálica y sólo utilizan dos tipos de pesos de fuente. Si usted está adjuntando Google Fonts por su cuenta, puede elegir exactamente que pesos incluir desde la pestaña de Personalización en Google Fonts:

Cómo elegir los estilos de Google Fonts

Cómo elegir los estilos de Google Fonts

La mayoría de los temas de WordPress de hoy en día incluyen formas sencillas para elegir qué Google Fonts y pesos desea usar. Pero, no todos los desarrolladores de temas se enfocan en el desempeño. Así que en algunos casos, podría ser mejor deshabilitar Google Fonts en su tema y agregarlos usted mismo.

Las fuentes variables también están empezando a ser populares, y están soportadas por todos los navegadores modernos. Estas son sorprendentes porque permiten el uso de un archivo de fuente para simplemente transformarse en diferentes propiedades. Sin embargo, no hay muchas fuentes gratuitas a elegi, Google tiene algunas fuentes variables en Early Acceso (Acceso Temprano)

Considere Hospedar a Google Fonts Localmente

Como alternativa a servir las fuentes desde el servidor de Google, usted puede hospedar localmente las fuentes, lo cual podría brindar beneficios en el desempeño. Aunque, recuerde que la mayoría de las Google Fonts probablemente estén guardadas en la cache de los navegadores de las personas. Así que recomendamos hacer sus propias pruebas de desempeño.

Si usted está utilizando una fuente premium que no sea de Google Fonts, como la de “Brandon” que utilizamos en el sitio de Kinsta, sin duda alguna hospedarla forma local (y sirviendo eso desde su CDN) es la mejor ruta a tomar. Para aprender más sobre este tema, lea nuestros artículos sobre cómo hospedar fuentes de forma local.

Elija una Fuente Que Obtendrá Actualizaciones

Las fuentes son como los plugins y temas de WordPress – con el tiempo, estas reciben actualizaciones y novedades para hacerlas aún mejores. Y a pesar de que el riesgo no es tan grande como con los plugins de WordPress, aún puede ser beneficioso elegir una fuente que reciba actualizaciones regulares. La familia Noto de Google ha sido una de las que ha recibido actualizaciones regulares desde el 2014.

Ya que la mayoría de las fuentes en esta lista son populares, es muy probable que cualquiera de las fuentes en esta lista recibirá actualizaciones y mejoras regulares. Y si usted decide elegir una que no esté en la lista, asegúrese de elegir una que sea lo suficientemente popular para llamar la atención.

No Se Olvide de la Accesibilidad

De acuerdo con el World Health Organization, desde el 2017, un estimado de 253 millones de personas tienen problemas de la vista: 36 millones son ciegos y 217 millones tienen una deficiencia visual severa.

Al utilizar Google Fonts usted tiene el control de cómo luce con CSS, como el color y el tamaño. No se olvide de seguir las directrices de Accesibilidad de Contenido Web (WCAG) 2.0. Esto asegurará de que su contenido sea de fácil acceso para todos.

“Al seguir estas pautas hará que su contenido sea accesible a un mayor rango de gente con discapacidades, incluyendo ceguera y visión reducida, sordera y páridad auditiva, discapacidades de aprendizaje, limitaciones cognitivas, movimiento limitado, discapacidades del habla, fotosensibilidad y combinaciones de estas.

Un lineamiento muy importante es el contraste de color. En un viejo diseño del sitio de Kinsta, nuestra fuente era un poco brillante y los visitantes se quejaron de que era muy difícil de leer. Lo último que queremos hacer es publicar contenido sensacional para terminar cansando los ojos de los lectores.

Puede utilizar una herramienta como Color Contrast Cheker de WebAIM para ver si los colores de su fuente pasan las recomendaciones oficiales. Abajo podrá ver que los colores en nuestro blog ahora pasan la prueba. 👍

Herramienta de Color Contras Checker

Herramienta de Color Contras Checker

¿Cuál Es Su Fuente de Google Fonts Favorita?

Google Font es sorprendente y es usada por millones de sitios web a diario. Seguir las mejores prácticas, como limitar el peso de las fuentes, hospedarlos localmente (en algunos casos), y seguir las directrices de accesibilidad, asegurará una mejor experiencia para sus visitantes.

Ahora sigamos con usted – ¿Cuáles son sus fuentes y parejas de fuentes favoritas de Google Fonts? Por favor comparta con nosotros en los comentarios de abajo.

15
Shares