Las 12 mejores fuentes de Google para sitios web (y mejores prácticas)

Al crear un sitio web, la elección de la fuente es un aspecto importante de la apariencia general de su sitio. Las fuentes deben ser fáciles de leer, pero también estéticamente agradables. Si elige la fuente incorrecta, puede interrumpir la experiencia del usuario y, de hecho, hacer que su contenido sea difícil de leer. Gracias a Google, hay muchas opciones de fuentes disponibles para usted. Desde su lanzamiento en 2010, las fuentes de Google han recorrido un largo camino desde sus 19 ofertas de fuentes. Ahora hay más de 1450 opciones disponibles actualmente, por lo que elegir las fuentes correctas puede ser desalentador. En esta publicación, le haremos la vida un poco más fácil al proporcionarle nuestra lista de las mejores fuentes de Google para usar en su sitio web.

¿Qué son las fuentes de Google?

Google Fonts es una colección de fuentes web de alta calidad para usar en proyectos web. Además, todas las fuentes se pueden descargar para su instalación en sistemas locales. Las fuentes se introducen en su sitio web a través de la red de entrega de contenido (CDN) de Google y se cargarán automáticamente una vez instaladas.

¿Por qué debería usar las fuentes de Google?

Todas las fuentes son gratuitas para uso comercial, por lo que se pueden usar tanto en proyectos web como impresos. Además, todas las fuentes se actualizan automáticamente, por lo que no hay necesidad de preocuparse por mantener las cosas actualizadas manualmente. Una vez instalado en su sitio, no hay nada más que hacer. Como se mencionó anteriormente, hay toneladas de opciones con más de 1450 familias de fuentes. Por último, las fuentes de Google ofrecen compatibilidad con varios idiomas, por lo que si su sitio tiene más de un idioma instalado, está listo para comenzar.

Las 12 mejores fuentes de Google disponibles (¡y son gratis!)

Con tantas opciones disponibles, puede ser un poco abrumador saber qué fuentes elegir para su sitio web. Afortunadamente, lo ayudaremos a determinar las familias de fuentes más populares y de moda para que las use en su sitio web. Empecemos.

1. Roboto

Roboto se considera una fuente de doble propósito y es la fuente de Google más popular disponible. De forma geométrica, también tiene bonitas curvas y generalmente se considera muy fácil de leer. De hecho, se ha utilizado como tipo de letra para el sistema operativo Android de Google desde 2014.

Obtener la fuente

2. Abrir Sans

Open Sans cuenta con una apariencia ultra legible y fácil de usar. Es genial tanto para títulos como para textos de cuerpo. Debido a su facilidad de lectura, se utiliza como fuente predeterminada en el tema Divi.

Obtener la fuente

3. Montserrat

Con más de 30 estilos, Monsterrat es bastante versátil. Se inspiró en obras de arte vistas en el histórico barrio de Montserrat de Buenos Aires durante la primera mitad del siglo XX.

Obtener la fuente

4. Lato

Google describe a Lato como una fuente "seria pero amigable". Polaco para el verano, Lato es una fuente multipropósito que generalmente es fácil de leer e invoca sentimientos de alegría de verano.

Ah, y por cierto, lo usamos en nuestro blog.

Obtener la fuente

5. Poppins

Poppins es una fuente redondeada y muy popular que es adecuada tanto para el encabezado como para el cuerpo del texto. Desarrollada en 2014 como una fuente de código abierto, Poppins se basa en los sistemas de escritura latino y devanagari.

Obtener la fuente

6. Fuente Sans Pro

Lanzada como la primera fuente de código abierto de Adobe, Source Sans Pro es adecuada para todos los diseños de interfaz de usuario. Es bastante versátil y combina bien con otras fuentes de nuestra lista, como Montserrat, Open Sans y Work Sans.

Obtener la fuente

7. Ferrocarril

Fina y elegante, Raleway es una fuente tipográfica para pantalla muy adecuada para encabezados y subtítulos. Desarrollada inicialmente en 2012 como una única fuente fina, se ha ampliado para incluir 9 variaciones.

Obtener la fuente

8. Noto Sans

Noto Sans es bastante robusto con sus 18 variaciones de fuente. Además, hay más de 3700 glifos disponibles con esta increíble tipografía. Con más de 18 variaciones que incluyen múltiples pesos, anchos y cursivas, Noto Sans es adecuado para casi cualquier diseño.

Obtener la fuente

9. Inter

Diseñada específicamente para pantallas de computadora, Inter es la fuente más nueva de nuestra lista. Lanzado inicialmente bajo el nombre de Interface, Inter apareció en escena en 2017. Con frecuencia se lo conoce como un cruce entre Helvetica y San Fransisco Pro.

Obtener la fuente

10. Roboto Losa

Basado en el popular Roboto, la variación Slab está disponible en cuatro pesos: fino, ligero, normal y audaz.

Obtener la fuente

11. Buen tiempo

Como uno de los únicos tipos de letra serif en nuestra lista, Merriweather es divertido, pero serio. Cuenta con letras altas condensadas, pero fáciles de leer en pantallas de todos los tamaños. También hay disponible una fuente Merriweather Sans que combina bien con su primo serif.

Obtener la fuente

12. Exhibición de juegos limpios

Playfair Display emana un estilo del viejo mundo, pero exhibe un estilo moderno. Es más adecuado para encabezados debido a su apariencia dominante. Cuando utilice Playfair Display, considere combinarlo con una fuente sans serif de fácil lectura, como Roboto, Open Sans, Work Sans o Lato.

Obtener la fuente

Mejores prácticas para usar Google Fonts en WordPress

El uso de las fuentes de Google es rápido y fácil, pero hay algunas cosas que deben tenerse en cuenta para que su sitio funcione sin problemas y rápido. Para aprovechar al máximo el uso de estas fuentes, la optimización del sitio es clave.

Use solo las fuentes que necesita

Al considerar la velocidad del sitio, generalmente solo debe usar dos o tres familias de fuentes en su sitio. Las familias de fuentes consisten en todas las iteraciones de una fuente. Por ejemplo, si instala la familia Montserrat en su sitio, en realidad está instalando 8 fuentes. Las familias de fuentes contienen todas las instancias de un tipo de fuente, que pueden incluir diferentes pesos (regular, medio, semi-negrita, negrita) y transformaciones que incluyen cursiva.

Usar un complemento de tipografía

Es una buena idea usar un complemento de tipografía para administrar las fuentes instaladas en su sitio web. Algunos temas como Divi tienen gestión de tipografía integrada en su marco. Los complementos de tipografía pueden ayudarlo a administrar no solo sus fuentes, sino también tipos de letra, íconos, capitulares y más.

Elija buenas combinaciones de fuentes

Al elegir fuentes, intente elegir fuentes que funcionen bien juntas. Además, debe emparejar encabezados serif con texto de cuerpo sans serif. Esto se debe a que el uso de dos fuentes serif juntas hace que el texto sea difícil de leer. Alternativamente, es totalmente aceptable usar dos fuentes san serif juntas, o incluso diferentes pesos en la misma familia. Si no está seguro de qué combinaciones de fuentes usar, puede usar una práctica extensión de navegador como Fontpair para que sea más fácil encontrar qué fuentes está usando un sitio web.

Utilice fuentes de Google autohospedadas

Si elige no usar un complemento de tipografía en su sitio de WordPress, puede alojar las fuentes en su propio servidor. El proceso es bastante simple de lograr en unos pocos pasos.

El primer paso es descargar la fuente. Elija la fuente que desea descargar, luego haga clic en el botón Descargar familia en la esquina superior derecha de su pantalla. Tenga en cuenta que cuando descarga la fuente de Google, automáticamente acepta sus términos de servicio.

Una vez que se descargan las fuentes, deberá moverlas a su proyecto. Para este ejemplo, usaremos Mamp para subirlos al tema Twenty Twenty.

Al colocar los archivos de fuentes en su proyecto, asegúrese de tomar nota de la ubicación del archivo. Deberá agregarlo a través de CSS en los próximos pasos. Para acceder a las fuentes de su tema, vaya a /wp-content/themes/twentytwenty/assets/fonts/ . Si está utilizando un tema diferente, reemplace veinteveinte con el nombre de su tema. Arrastre sus archivos de fuentes descargados (incluida la carpeta) a la carpeta de fuentes en sus sitios de WordPress.

A continuación, ubique la fuente descargada y arrástrela a la carpeta de activos/fuentes de su tema.

Agregar el CSS

A continuación, necesitaremos agregar un poco de CSS al personalizador del tema para que se reconozca nuestra fuente. Vaya a Apariencia > Personalizar .

Haga clic en CSS adicional en el personalizador para abrir el área de entrada de css.

A continuación, agregue el siguiente código en el área CSS adicional:

@font-face {
    font-family: Roboto;
    src: url(/wp-content/themes/twentytwenty/assets/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}

Para usar su nueva fuente, simplemente haga referencia a la fuente usando CSS. Puede usar la herramienta de inspección del navegador para aplicar la fuente a cualquier clase de css que desee. En este ejemplo, queremos que el título del sitio, así como el contenido de la página, utilicen nuestra nueva fuente. Para este ejemplo, ingrese el siguiente CSS:

.entry-title a {
font-family: "Roboto", Arial, sans-serif;
}

.entry-content {
font-family: "Roboto", Arial, sans-serif;
}

Haga clic en Publicar para guardar sus cambios.

Límite de pesos de fuente

De manera similar a mantener sus familias de fuentes al mínimo, debe limitar la cantidad de pesos de fuente que usa en su sitio web. Si solo planea usar regular, medio y negrita, no hay una buena razón para incluir 18 variaciones de una fuente. Pedir a Google que entregue pesos de fuente adicionales que no se están utilizando solo aumentará el tiempo que se tarda en cargar las fuentes desde los servidores de Google.

Uso de fuentes de Google en Divi

Divi hace que las fuentes de Google estén disponibles de forma predeterminada. Las fuentes están disponibles en cualquier módulo que tenga texto. Tiene la posibilidad de elegir entre cientos de fuentes web de la biblioteca de fuentes de Google.

En las opciones del tema Divi, puede optar por habilitar Google Fonts, junto con los subconjuntos de fuentes.

Gracias a la función de búsqueda de fuentes de Divi, es fácil buscar y encontrar cualquier fuente de Google que desee. Otra gran característica de Divi es la capacidad de ver las fuentes utilizadas recientemente en la parte superior para facilitar el acceso.

También puede ingresar la clave API de Google para que Divi se mantenga actualizado con las últimas versiones de fuentes, así como con las nuevas que se agreguen en el repositorio de fuentes de Google.

Pensamientos finales

Elegir la fuente adecuada para su sitio web puede ser un proceso abrumador debido a los cientos de opciones disponibles para usted. Solo recuerde elegir una fuente que sea fácil de leer y que se vea bien con el estado de ánimo de su diseño. Combine fuentes que se complementen entre sí y trate de no usar demasiadas fuentes.

¿Cuáles son algunas de tus fuentes favoritas de Google? Háganos saber en la sección de comentarios.