Cómo utilizar Google Fonts: Guía completa + 10 mejores combinaciones

Una imagen vale más que mil palabras. Pero si esas palabras tienen la tipografía correcta, conseguirás el impacto de una gran imagen.

miniatura google fonts

Imagen de Pixabay - © Free-Photos

Las fuentes de Google son un conjunto de tipografías que han agrupado y puesto disponible para todo el mundo.

Puedes descargarlas, instalarlas, y usarlas para maquetar todo tipo de contenido, como un PowerPoint o la portada de un trabajo en Word.

¡Sigue leyendo para saber cómo!

Qué son las Web Fonts

Durante muchos años, en el diseño web solo se podían usar unas fuentes tipográficas, llamadas “fuentes seguras”.

Esto era debido a que, para que se visualizara correctamente una fuente en un ordenador mientras navegabas por Internet, el usuario debía tener instalada en su dispositivo esa tipografía.

Si no, no podía ver ese tipo de letra y la maquetación de la web se “descolocaba”.

Esto pasa hoy en día en la aplicación, por ejemplo, de PowerPoint. Si quieres utilizar una fuente que no viene instalada por defecto, debes instalarla tú mismo.

Este problema se solucionó con la llegada de las “Web Fonts”. Estas son tipografías muy variadas, que se almacenan en el servidor (en vez de tener que descargarlas en cada dispositivo), por lo que, cuando carga una página web, se descargan junto a las fotos y al texto.

Además, las fuentes de Google Fonts están comprimidas para que se descarguen en tu dispositivo de una forma rápida y sencilla.

Estas tipografías se mantienen almacenadas en la caché de tu dispositivo; si vuelves a entrar en una página con estas fuentes no se tienen que volver a descargar.

Qué es Google Fonts o Google Web Fonts

Google Fonts, conocido anteriormente como “Google Web Fonts”, es un catálogo o repositorio de estas fuentes con multitud de estilos tipográficos; completamente gratuito y libre de derechos.

En la actualidad hay más de 900 familias, cada una de éstas con variantes en cuanto al grosor de la letra o el estilo cursiva.

Puedes filtrar tu búsqueda en la barra de arriba.

Puedes descargarte y utilizar cualquiera de estas fuentes para un uso personal, como la creación de un PowerPoint, o para uso comercial, como el diseño de una página web.

Por qué utilizar las fuentes de Google Fonts

Aunque las fuentes de Google nacieran en gran parte para dar solución al problema que hemos visto del diseño web, en la actualidad se utilizan para cualquier tipo de diseño, como el de presentaciones de PowerPoint y plantilla de documentos en Word.

Por lo que, aunque no seas diseñador, las fuentes de Google tienen muchas ventajas para ti.

Conseguirás diseños originales y elegantes en tus presentaciones de PowerPoint

Como ya hemos hablado, estas fuentes las puedes utilizar en cualquiera de las aplicaciones de Office, como PowerPoint, y conseguir diseños increíbles.

Dependiendo de la temática que tengas, podrán servirte unas u otras; pero entre las 900 que tienes disponibles seguro que encuentras la combinación perfecta.

En Ciudadano 2.0 creamos nuestras portadas con tipografías de Google Fonts, como "League Spartan".

Y es que, es muy recomendable utilizar entre dos y tres fuentes para cada diseño.

De esta forma, conseguirás que la gente perciba tu presentación como mucho más trabajada y lograda, además de quedar mucho más estético.

Puedes utilizar su catálogo como inspiración

Si estás un poco perdido y no sabes que fuentes quedarán mejor en tu web o presentación, la página principal de Google Fonts puede servirte de inspiración.

En una de las opciones que hay al principio puedes escribir una palabra o texto para ver cómo queda con cada fuente.

También puedes filtrar el tipo de letra que buscas: desde una con mucho grosor hasta una que imite a la caligrafía.

Por ejemplo, para buscar una fuente con más grosor de lo habitual, haz clic en “Font Properties” y luego marca la casilla de “Thickness”. Al deslizar el cursor por la barra, irás filtrando las tipografías.

Desliza la barra hacia la izquierda o derecha para cambiar las propiedades.

Si estás buscando combinaciones de letras que puedan quedar bonitas, ¡echa un vistazo al último apartado de este post!

Son muy fáciles de usar: descarga, instala y ¡listo!

Para utilizar una fuente de Google tan solo deberás elegirla en su página principal, descargarla e instalarla en tu ordenador.

En el apartado siguiente vemos cada uno de esos pasos explicados detalladamente.

Permiten diseños web “responsive

Un diseño responsive es aquel en el que los elementos de la página web (texto, imágenes, columnas etc) se adaptan a cualquier tipo de pantalla (móvil, ordenador o Tablet).

Las fuentes de Google están diseñadas para cualquier tipo de dispositivo y navegador, por lo que, si eres diseñador web, no tendrás ningún problema a la hora de utilizarla.

Cómo usar Google Fonts

Sí todo lo que hemos visto hasta ahora te ha convencido y quieres empezar a utilizar las cuentas de Google en tus diseños, debes ir a su página principal: www.googlefonts.com

En la parte de arriba hay una barra buscadora, por si ya conoces el nombre de una fuente y quieres buscarla.

Justo al lado encuentras otro apartado, donde pone “Type something”.

Aquí puedes escribir una palabra o frase de ejemplo para visualizar las fuentes.

El siguiente apartado regula el tamaño de las fuentes.

Hemos escrito las palabras que buscábamos para ver cómo queda.

También tienes la opción de hacer la búsqueda con filtros, como la categoría de la fuente (escrita a mano, con poco espacio entre letras etc.), fuentes de otros idiomas (chino, japonés etc.) o las propiedades de las fuentes.

En las categorías de las fuentes tenemos las opciones referentes al estilo: Serif y Sans-Serif (más adelante veremos la diferencia), “Display”, “Handwritting” o “Monospace”.

Cada estilo tiene unas características:

La tipografía “Display” está diseñada para títulos, textos grandes o banners principales. Sus letras son más llamativas que el resto de las fuentes.

Estas son algunas tipografías "Display".

La tipografía “Handwritting” en español, “letra manuscrita”, imita la caligrafía humana. Queda muy bonita para textos más pequeños, quizás puntuales, o para textos en los que se quiera imitar la letra humana.

Estas son algunas fuentes con estilo "Handwritting".

La tipografía “Monospace” es la que tanto sus letras como sus espacios ocupan el mismo espacio horizontal.

Fueron las fuentes originales de las máquinas de escribir, y las que se empezaron a usar en informática (por su sencillez).

Estos son algunos ejemplos de la tipografía "Monospace".

Es un estilo de fuente muy sobria que puede dar un toque de seriedad a una presentación.

Otro tipo de filtro es el de “Font Properties”.

Aquí vas a poder filtrar por las características de las fuentes, como el número de estilos de la fuente, el grosor, la inclinación y el ancho de las letras.

En este ejemplo, hemos buscado una fuente con inclinación moderada y un grosor mayor.

Algunos ejemplos con el ancho y el estilo que hemos filtrado.

Al hacer clic sobre una de las tipografías llega una nueva ventana.

Aquí encuentras los diferentes estilos de la fuente (si tiene más de 1). Cada estilo se diferencia por un grosor e inclinación diferente (más negrita y más cursiva).

Estos son algunos estilos de la tipografía "Roboto".

Si sigues bajando encuentras todo el abecedario escrito en esa tipografía, la licencia que tiene información sobre su creador.

Por último, encuentras las combinaciones de esa letra con las cinco otras tipografías más utilizadas.

Cómo descargar fuentes de Google Fonts

Para descargar las fuentes de Google Fonts tienes dos opciones: descargar solo un estilo de esa letra o descargarte la tipografía entera.

Si quieres descargarte la tipografía entera, debes hacer clic en el botón que hay arriba a la derecha donde pone “Download Family”.

Automáticamente se descarga en tu ordenador un archivo “.zip” que lleve el nombre de la letra.

"Yellowtail" solo tiene un estilo.

Si quieres descargarte tan solo un estilo, ve al que has elegido y haz clic en la opción de “+ Select this style” que encuentras en el margen derecho.

Haz clic sobre esta opción y aparecerá en el margen derecho estas opciones quieres la imagen de abajo.

Para descargar el estilo concreto de esta tipografía, haz clic en "Download all".

Para descargarte el estilo haz clic en “Dowload all”.

Se abre una nueva ventana en la que debes hacer clic en “Aceptar” para guardar el archivo en tu ordenador.

Cómo instalar fuentes de Google Fonts

Cuando ya tengas descargado el archivo de la fuente, que tendrá el nombre de esa tipografía y la terminación “.zip”.

Debes descomprimir la carpeta, haciendo clic en “Extraer todo”. Esto crea una nueva carpeta con los archivos descomprimidos.

Para extraer los archivos haz clic en "Extraer todo".

Ahora, dentro de la nueva carpeta, están los estilos que has elegido.

En este ejemplo solo hemos descargado uno, pero si tienes varios, selecciónalos todos dejando pulsada la tecla “Ctrl”, la flecha que hay justo encima que apunta hacia arriba y ve seleccionando cada una con las teclas de la flecha hacia abajo.

Cuando ya tengas todas seleccionadas, haz clic en el botón derecho. Haz clic en “Instalar para todos los usuarios”, y la tipografía quedará instalada en tu ordenador.

Haz clic en "Instalar para todos los usuarios".

Si no te aparece esta opción (seguramente cuando vayas a instalar varias fuentes a la vez) el método es distinto.

Debes ir al panel de control y buscar la sección de “Configuración de fuentes”.

Para instalar fuentes, arrastra el archivo hacia donde está indicado.

Arriba, hay una ventana donde pone que agregues los archivos ahí.

Selecciona todos como vimos antes y arrástralos hacia el recuadro.

Repite el proceso como ves en la imagen.

Ahora, para comprobar que está instalada, búscala en la barra buscadora de tipografías.

Luego abre PowerPoint. Escribe en la barra de letras el nombre de la tipografía, y ves que ya aparece.

En este ejemplo ya tenemos "Yellowtail" instalada en nuestro ordenador.

Google web Fonts en WordPress

Existen varias maneras de incorporar estas fuentes a tu página de WordPress, pero la más sencilla es mediante la instalación de un plugin.

Easy Google Fonts es un plugin que han publicado hace solo dos meses, pero que ya cuenta con muchas valoraciones positivas de los usuarios.

La fuentes y tipografías más populares de Google Fonts

Las tipografías más famosas suelen diferenciarse en dos grandes familias: Serif y Sans-Serif.

Las tipografías Serif, con origen en los medios de comunicación tradicionales como los periódicos, fueron diseñadas con ciertos detalles, llamadas “serifas”, en el contorno de cada letra.

Estos son algunos ejemplos del estilo "Serif".

En cambio, la tipografía Sans-Serif elimina esos detalles y forma letras más sobrias y geométricas.

Estos son algunos ejemplos del estilo "Sans Serif".

Te dejamos algunas de las fuentes de Google más utilizadas (por lo bonitas que quedan):

Fonts Montserrat

Montserrat es un tipo de letra Sans-Serif con 18 estilos diferentes en su familia.

Diseñada por Julieta Ulanovsky, está inspirada en los carteles del barrio de Montserrat, en Buenos Aires.

Es una tipografía muy utilizada en la creación de post promocionales.

Estas son algunos estilos de la tipografía "Montserrat".

Fonts Raleway

Diseñada por Matt McInerney, Raleway es una fuente Sans-Serif con 18 estilos diferentes.

Tiene un estilo redondeado que otorga una lectura sencilla.

Estos son algunos estilos de la tipografía "Raleway".

Fonts Roboto

Diseñada por Christian Robertson, esta fuente Sans-Serif tiene caracteres muy geométricos y curvas abiertas. Algo diferente a las otras, pero muy utilizada en el diseño web.

Estos son algunos estilos de la tipografía "Roboto".

Fonts Lato

Esta fuente Sans-Serif con 10 estilos en su familia es similar a Roboto.

Las características redondeadas le dan un toque de elegancia y sutileza, por lo que es muy utilizada en el diseño gráfico y web.

Estos son diferentes estilos de la tipografía "Lato".

10 Ejemplos de combinaciones de Google Fonts

Para conseguir un diseño que impacte a los lectores, te recomiendo que combines entre dos y tres fuentes.

A continuación, te dejamos las 10 combinaciones que más nos gustan mucho.

Y también te recomendamos este post, que nos ha servido de inspiración en numerosas ocasiones, de canva.com

https://www.canva.com/es_mx/aprende/guia-definitiva-para-combinar-fuentes/

Montserrat + Merriweather

En el ejemplo de abajo hemos utilizado estas dos fuentes para una presentación de Power Point.

El título está creado con Montserrat y escrito en mayúsculas, con un tamaño de 126.

El subtítulo, también en mayúsculas, y el texto están escritos en Merriweather con un tamaño de 23 y 15 pt.

Esta presentación de PowerPoint está hecha con "Montserrat" y "Merriweather".

Oswald Bold + Montserrat Light

La fuente Oswald en su formato negrita (Bold) junto a Montserrat Light combinan de una forma muy llamativa.

En este ejemplo el título está escrito en Oswald Bold con un tamaño de 123 pt, y el subtítulo y el texto en Montserrat Light con tamaño de 36 y 23 respectivamente.

La combinación de "Oswald Bold" y "Montserrat" se utiliza mucho en diseño.

Archivo Black + Tenor Sans

Para un post de Instagram de promoción de un negocio queda muy elegante la combinación de Archivo Black con Tenor Sans.

En esta ocasión el título está escrito con la primera tipografía y un tamaño de 115 pt, mientras que el subtítulo y el texto están en Tenor Sans con tamaño de 40 pt y 22 pt respectivamente.

Este anuncio está hecho con "Archivo Black".

Abril Fatface + Lato

AbrilFatce es una letra risueña que da un toque alegre al diseño.

En el ejemplo de abajo el título está escrito con esta tipografía y con un tamaño de 120 pt.

El subtítulo, con un tamaño de 50 pt, y el texto, con 23 pt, están escritos en Lato.

Esta es la tipografía "Abril Fatface" junto a "Lato".

PlayFair Display + Arapey

Este ejemplo está diseñado para una portada de un canal de Youtube, combinando la letra PlayFair Display y Arapey.

El título, escrito en PlayFair Display mayúsculas y con un tamaño de 91 pt ocupa la posición central, mientras que el texto complementario está en Arapey con un tamaño 25 pt.

Esta cabecera de Youtube tiene el título en "PlayFair Display"

Roboto Condensed + Droid Serif

Esta combinación, como ves en el ejemplo, es muy sencilla pero muy versátil, con la que puedes crear diseños para cualquier objetivo.

En este caso, el título está diseñado en Roboto Condensed con un tamaño de 101 pt, y el subtítulo y el texto en la fuente Droid Serif con tamaños de 41 y 23 respectivamente.

Con la combinación de Roboto Condensed y Droid Serif se consiguen diseños muy sofisticados.

Permanent marker + Roboto

Permanent Marker es una fuente muy llamativa, que imita a la caligrafía humana y da un toque alegre a cualquier presentación.

Combinada con la tipografía Roboto hemos creado este ejemplo para una portada de un canal de Youtube.

El título tiene un tamaño de 92 pt y el subtítulo de 42 pt.

Con "Permanent Marker" puedes conseguir efectos muy llamativos.

Sacramento + Roboto

Esta combinación queda muy bonita. La tipografía Sacramento da un estilo único y que llama la atención del lector.

En este ejemplo tiene un tamaño de 152 pt, y el título y texto, en tipografía Roboto, con 45 pt y 23 pt respectivamente.

"Sacramento" es una tipografía muy alegre.

Anton + Yellowtail

En este ejemplo hemos querido similar una publicación en Instagram de una tienda de discos.

En esta combinación de se complementa la forma geométrica y ruda de Anton con la ligereza y las curvas de Yellowtail.

El título está escrito con la tipografía Anton, con un tamaño de 169, y el subtítulo y el texto en Yellowtail con tamaños de 67 pt y 18 pt.

Con la combinación de "Anton" y "Yellowtail" puedes conseguir efectos súper chulos.

Vollkorn + Raleway

Esta combinación de Vollkorn con Raleway resulta muy visual para cualquier tipo de presentación.

El título, con tamaño de 141, está diseñado en Vollkorn, mientras que el subtítulo y texto, con tamaños de 48 pt y 23 pt respectivamente, en Raleway.

"Vollkorn" con "Raleway" resulta muy estético para cualquier diseño.

 

 

 

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Lucía Berlanga

Soy colaboradora de este blog. Me he formado en el tratamiento de datos, desde su extracción, al análisis y visualización, y disfruto mucho con el desarrollo web.

He trabajado en diferentes sectores, pero desde hace un tiempo enfocada a diseño y desarrollo web, junto al marketing digital. Por eso, en este blog hablaremos mucho sobre tecnología y SEO, entre otras muchas cosas :)


4 comentarios en «Cómo utilizar Google Fonts: Guía completa + 10 mejores combinaciones»

  1. Hola
    la verdad es que es muy interesante el tema de las Google Fonts para que la imagen de la web tenga un buena presencia.
    Pero también he visto que cuando haces alguna prueba en GTmetrix o Pagespeed, uno de los problemas habituales suelen ser las Google fonts que retrasan la carga.

    Cuál es la mejor manera de combinar para que beneficie la imagen web, pero no la penalize

    Gracias

    Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).