Cómo conectar Google Fonts a sitios web Tilda

Leer
Leer
Leer
Leer
Google Fonts es una gran biblioteca de fuentes gratuitas que pueden utilizarse en cualquier proyecto, incluidos los comerciales. Este artículo describe cómo añadir fuentes de esta biblioteca para utilizarlas en tu sitio web.
Conexión de fuentes de Google Fonts buscando dentro de la biblioteca de fuentes Tilda
Para añadir una fuente de Google Fonts, ve a «Configuración del sitio» → «Fuentes» y haz clic en el botón «Configuración avanzada».
Site Settings > Fonts: the "Advanced settings" button below the font preview slider.
Haz clic en la pestaña Google Fonts y, a continuación, en el botón "Buscar en fuentes" para acceder a la biblioteca de fuentes de Google Fonts.
Site Settings → "Fonts" → "Google Fonts": the magnifying glass search icon next to the "HEADING FONT" field with the tooltip "Search in Fonts".
Aparecerá un panel en el que podrá buscar una fuente por su nombre o seleccionar el estilo de fuente deseado: Serif, Sans Serif, Handwritten, Monospaced o Display font (fuente especial para títulos o elementos de texto de gran tamaño).
Google Fonts directory page with font preview cards on the right and search, category, and language support filters on the left.
Después de seleccionar la fuente que desea, puede elegir los pesos de fuente que desee.
A continuación, haga clic en el botón "Seleccionar fuente" y, opcionalmente, marque la casilla si desea utilizar esa fuente tanto para los títulos como para el texto.
Font details page: the "Select font" button on the right and font weight checkboxes below.
Tras seleccionar el campo de enlace para Google Fonts, se insertará automáticamente el enlace adecuado para su conexión. Guarde los cambios. Ahora la fuente está conectada y puede controlar sus parámetros al editar páginas.
The "HEADING FONT" and "BODY TEXT FONT" fields under the "Google Fonts" tab in Site Settings > Fonts.
Conectar fuentes insertando un enlace desde Google Fonts
Abra fonts.google.com y seleccione la fuente que desea utilizar.
Haz clic en el botón "Obtener fuente" → "Obtener código de incrustación" → selecciona "Enlace" y elige los estilos que necesites.
On Google Fonts: the "+ Select this style" button next to a font style and the selected styles list in the "Selected family" sidebar on the right.
Copie el enlace de la fuente, que es la parte del código dentro de las comillas.

El enlace debe tener este aspecto:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
https://fonts.googleapis.com/css2?family=Lora:wght@400..700
On Google Fonts: the "" radio button and font URL inside the embed code block in the "Selected family" sidebar on the right.
Vaya a Tilda → Ajustes del sitio → Fuentes y colores → Ajustes personalizados → Google Fonts, y pegue el enlace en el campo "Enlace CSS".
Importante: Utilice el nombre exacto de la fuente tal y como se denomina en Google Fonts para los campos "Nombre de la familia de fuentes del encabezado" y "Nombre de la familia de fuentes del cuerpo de texto".
Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.
Publique todas las páginas del sitio web.
On the site dashboard: the "PUBLISH ALL PAGES" button at the top.
La fuente está conectada.
Published website page showing a cover block with custom connected fonts applied to the heading and body text.
Cómo añadir dos Google Fonts diferentes
Haga clic en el botón "Obtener fuente" para dos fuentes diferentes → "Obtener código de incrustación" → seleccione "Enlace" y seleccione los estilos deseados para las fuentes.
On Google Fonts: the "+ Select this style" button next to a font weight, and the selected font families in the "Selected families" sidebar on the right.
Copie el enlace CSS con ambas fuentes.
Google Fonts: The "" option and the font URL inside the embed code in the "Selected families" sidebar.
Pega el enlace en el campo CSS link de la pestaña Google Fonts.

Pega el nombre completo y exacto de la primera fuente en el campo Headline Font Family Name y pega el nombre completo y exacto de otra fuente en el campo Text Font Family Name.
Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.
Problemas de conexión de fuentes
La razón más común para que una fuente no se muestre es que una fuente está conectada en la Configuración del Sitio y otra fuente está asignada para la página usando la barra de herramientas del editor de texto. En este caso, debe restablecer el estilo asignado haciendo clic en el botón "Borrar formato" de la barra de herramientas superior.

Más información sobre otros errores en el artículo:
Hecho en
Tilda