Blog

Cómo incorporar tipografías de Google Fonts a tu sitio web de Grid 

Google Fonts es una plataforma online y gratuita donde podemos buscar, descargar e incorporar tipografías a nuestros sitios web. En Fonts podemos buscar tipografías específicas por su nombre, filtrar por categoría, idioma y propiedades de la fuente. 

Te dejamos el link para acceder a Google Fonts ↗.

A continuación te explicaremos cómo:

1. Elegir la tipografía
2. Copiar y pegar el código
3. Insertar más de una tipografía

1. Elegir la tipografía

El primer paso para incorporar tipografías en nuestro sitio, es seleccionar la tipografía elegida. Para esto desde Google Fonts vamos a abrirla y seleccionarla haciendo clic en el botón + Select this style o + Seleccionar este estilo.

Te recomendamos que selecciones más de un espesor de tipografía, salteando uno o más espesores en el medio. Esto es para que haya una diferencia más notoria cuando hacemos un cambio de formato con negrita, por ejemplo. Además te sugerimos elegir un estilo en itálica, para tenerlo cargado en caso de querer utilizarlo. 

En este caso elegimos la tipografía IBM Plex Sans, en tamaño 400, 400 itálica y 700.

2. Copiar y pegar el código

Una vez seleccionados los estilos, se abrirá una ventana lateral a la derecha con la información de los mismos.

Dentro de esta ventana encontraremos el código que debemos copiar para luego pegar en el administrador de nuestro sitio web. En la siguiente imagen te mostramos cuál es la parte del código que debemos seleccionar y copiar.

Una vez copiado nos dirigiremos a la Herramienta de diseño de Grid y en la pestaña de Tipografía debemos pegar el código en el campo de texto con el título Código de inserción.  

⚠️ Cargar el código es importante porque es la manera que tenemos de asegurarnos que todos los usuarios que accedan a nuestra web puedan ver la tipografía que queremos. Si no pegamos este código en la Herramienta de diseño de Grid, puede ser que nosotros veamos la tipografía elegida (si la tenemos instalada), pero el resto de los usuarios no la podrán ver.

Luego, en los campos de texto que corresponden a Tipografía general, de títulos y de citas, vamos a escribir el nombre de la tipografía elegida entre comillas, como aparece en Google Fonts, obviando el font-family y el sans-serif.

Lo podemos encontrar debajo del código que copiamos previamente.

3. Insertar más de una tipografía

En este caso utilizamos la misma tipografía para los textos generales, los títulos y las citas, pero se pueden cargar más de una y diferenciar la tipografía de los títulos de la tipografía de los párrafos, por ejemplo.

Para hacer esto debemos volver a copiar el código de una nueva tipografía y pegarlo SIN BORRAR el anterior. De esta manera el campo de texto del Código de inserción va a tener más de un código y lo que va a definir qué tipografía se utiliza para los distintos tipos de texto, es el nombre que vamos a escribir en cada campo de texto respectivamente. 

Una vez completados los campos con las tipografías correspondientes debemos hacer coincidir la barra de espesor con los tamaños de tipografía elegida. Para el espesor general elegimos 400, para espesor de títulos 700 y espesor de citas 400.