Como conectar o Google Fonts a sites Tilda

Ler
Ler
Ler
Ler
O Google Fonts é uma grande biblioteca de fontes gratuitas que podem ser usadas em qualquer projeto, inclusive os comerciais. Este artigo descreve como adicionar fontes dessa biblioteca para uso em seu site.
Conectar fontes do Google Fonts pesquisando na biblioteca de fontes Tilda
Para adicionar uma fonte do Google Fonts, acesse Configurações do site → Fontes e clique no botão Configurações avançadas.
Site Settings > Fonts: the "Advanced settings" button below the font preview slider.
Clique na guia Google Fonts e, em seguida, clique no botão "Search in Fonts" (Pesquisar em fontes) para acessar a biblioteca de fontes do Google Fonts.
Site Settings → "Fonts" → "Google Fonts": the magnifying glass search icon next to the "HEADING FONT" field with the tooltip "Search in Fonts".
Haverá um painel no qual você poderá procurar uma fonte pelo nome ou selecionar o estilo de fonte desejado - Serif, Sans Serif, Handwritten, Monospaced ou Display font (fonte especial para títulos grandes ou elementos de texto).
Google Fonts directory page with font preview cards on the right and search, category, and language support filters on the left.
Depois de selecionar a fonte desejada, você pode escolher o peso da fonte que deseja.
Em seguida, clique no botão "Select Font" (Selecionar fonte) e, opcionalmente, marque a caixa se quiser usar essa fonte para cabeçalhos e texto.
Font details page: the "Select font" button on the right and font weight checkboxes below.
Após selecionar o campo de link para o Google Fonts, o link correto para sua conexão será inserido automaticamente. Salve as alterações. Agora a fonte está conectada e você pode controlar seus parâmetros ao editar páginas.
The "HEADING FONT" and "BODY TEXT FONT" fields under the "Google Fonts" tab in Site Settings > Fonts.
Conexão de fontes inserindo um link do Google Fonts
Abra fonts.google.com e selecione a fonte que deseja usar.
Clique no botão "Get font" → "Get embed code" → selecione "Link" e selecione os estilos de que você precisa.
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 o link da fonte, que é a parte do código entre aspas.

O link deve ter a seguinte aparência:
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.
Acesse Tilda → Site Settings → Fonts and Colors → Custom settings → Google Fonts e cole o link no campo "CSS Link".
Importante: use o nome exato da fonte como ela é chamada no Google Fonts para os campos "Nome da família da fonte do título" e "Nome da família da fonte do texto do corpo".
Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.
Publicar todas as páginas do site.
On the site dashboard: the "PUBLISH ALL PAGES" button at the top.
A fonte está conectada.
Published website page showing a cover block with custom connected fonts applied to the heading and body text.
Como adicionar duas fontes diferentes do Google Fonts
Clique no botão "Get font" para duas fontes diferentes → "Get embed code" → selecione "Link" e selecione os estilos desejados para as fontes.
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 o link CSS com as duas fontes.
Google Fonts: The "" option and the font URL inside the embed code in the "Selected families" sidebar.
Cole o link no campo CSS link na guia Google Fonts.

Cole o nome completo e exato da primeira fonte no campo Headline Font Family Name e cole o nome completo e exato de outra fonte no 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 conexão de fontes
O motivo mais comum para uma fonte não ser exibida é que uma fonte está conectada nas Configurações do site e outra fonte está atribuída à página usando a barra de ferramentas do editor de texto. Nesse caso, você precisa redefinir o estilo atribuído clicando no botão "Limpar formatação" na barra de ferramentas superior.

Leia mais sobre outros erros no artigo:
Fabricado em
Tilda