Pesquisa

Use uma fonte Google em uma landing page

clickable_banner-pricing_3_en-us.png

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.coem/.
  2. Selecione a família de fontes que você deseja usar na sua landing page.
    font-en_us.png
  3. Na seção Styles (Estilos), adicione os estilos desejados clicando em Select "Name of style" + (Selecionar "Nome do estilo" +). O estilo aparecerá no painel Selected family (Família selecionada) à 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 alternativa caso o navegador ou sistema do destinatário não seja compatível com a fonte importada do Google. 

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 de fonte Título, Subtítulo, Cabeçalho e Corpo normal na sua landing page e especifique suas famílias.
  3. Adicione a regra !important no final de cada linha de código para garantir que todas as regras de estilo anteriores sejam substituídas e que a fonte personalizada exibida na versão publicada da landing page seja a correta.

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

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

3️⃣ Adicione CSS personalizado à landing page

  1. Acesse Marketing > Landing pages.
  2. Selecione a landing page na qual você deseja usar a fonte do Google.

  3. No editor da landing page, clique em Settings (Configurações) no canto inferior esquerdo.
    settings-en_us.png

  4. Abra a aba Rastreio.

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

  6. Clique em Concluído.
  7. 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 à agência parceira da Brevo certa.

💬 Este artigo foi útil?

8 de 30 acharam isto útil