Pesquisa

Use uma fonte Google em uma landing page

💡 É bom saber
Landing pages estão disponíveis para os planos Business e Enterprise.

Neste artigo, vamos explicar como importar e usar uma fonte Google em uma landing page.

1️⃣ Recupere o código de importação CSS

Para recuperar o URL de uma fonte Google:

  1. Acesse https://fonts.google.com/.
  2. Selecione a família da fonte que deseja usar em sua landing page.
    font-en_us.png
  3. Na seção Estilos, adicione os estilos desejados, clicando em "Nome do estilo"+. O estilo aparecerá no painel Revisão à direita:select-font-en_us.png
  4. Na seção Usar na web, selecione a opção @importar. Você encontrará o código CSS para o URL da fonte Google e as regras CSS para especificar as famílias.
    css_code_rules-en_us.png

2️⃣ Construa seu CSS personalizado

💡 É bom saber
Adicione uma fonte de substituição para o caso do navegador ou do sistema do destinatário não aceitar a fonte Google importada. 

Para construir seu CSS personalizado:

  1. Copie o código CSS para o URL da fonte Google.
  2. Use as classes font-style-title, font-style-subtitle, font-style-head e font-style-normalText respectivamente para os estilos das fontes de Título, Subtítulo, Cabeçalho e Corpo normal em sua landing page e especifique suas famílias.
  3. Adicione a regra !important ao fim de cada linha de código, para garantir que todas as regras de estilo anteriores sejam substituídas e para que a fonte personalizada exibida na versão publicada de sua landing page seja a correta.

No exemplo a seguir, construímos o código CSS para importar a fonte Google "Source Sans Pro" do site de fontes do Google (https://fonts.google.com/specimen/Source+Sans+Pro):

<style> @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
.font-style-title {font-family:'Source Sans Pro', sans-serif !important; } .font-style-subtitle {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-heading {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-normalText {font-family: 'Source Sans Pro', sans-serif !important; } </style>

3️⃣ Adicione CSS personalizado à landing page

  1. No editor de Landing Page, clique em Configurações no canto inferior esquerdo.
    settings-en_us.png

  2. Abra a aba Rastreio.

  3. Na Tag Head, adicione seu CSS personalizado.
    add_css-en_us.png

  4. Clique em Concluído.
  5. Se sua landing page já tiver sido publicada, clique em Lançar e republique para processar suas alterações.

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar o parceiro especialista certificado em Brevo.

💬 Este artigo foi útil?

Utilizadores que acharam útil: 8 de 26