Como usar fontes personalizadas em seu site

Como funciona

Se você não quiser usar as fontes padrão disponíveis no Construtor de Sites, poderá conectar fontes diferentes do catálogo Google Fonts para textos de cabeçalhos ou corpos por meio de um código HTML personalizado. Você pode usar uma solução existente ou adicionar seu próprio código.

Como obtê-lo

Usando uma solução existente

1. Abra seu projeto na Conta de Distribuidor.
2. Na barra lateral, clique em Site Builder.
3. Clique em Abrir Site Builder.
4. Insira o URL da fonte no bloco Código personalizado e especifique as classes de estilo para as quais o valor font-family deve ser alterado.

Exemplo de alteração da fonte do cabeçalho

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

Exemplo de alteração da fonte do corpo do texto

<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

5. Clique em Visualizar para ver suas alterações.

Assista ao vídeo tutorial desta instrução:

Como adicionar seu próprio código

1. No Builder, clique em Adicionar bloco e escolha Código personalizado.

2. Insira seu próprio código no bloco.

Links úteis