Pular para o conteúdo principal

Pesquisa

Olá Member! Conheça a nossa Central de Ajuda:

Uso de fontes personalizadas no Construtor de e-mails

Permanently deleted user
  • Atualizado

Ao criar seu próprio sistema de design de e-mail em HTML, talvez você queira usar uma fonte personalizada além das fontes padrão disponíveis. Ao trabalhar com diretrizes de marca em que você precisa usar uma fonte personalizada, é sempre melhor usar uma fonte personalizada com um recurso sólido.

 

Suporte ao cliente de e-mail


A primeira consideração a ser levada em conta ao trabalhar com fontes personalizadas é que o suporte do cliente de e-mail é irregular. Os seguintes clientes de e-mail oferecem suporte a fontes personalizadas:

  • Apple Mail
  • iOS Mail
  • Samsung Mail
  • Outlook.com

É importante definir um conjunto de fontes ao usar fontes personalizadas. Isso deve incluir algumas fontes padrão do sistema para garantir que seu e-mail seja renderizado para clientes que não oferecem suporte a fontes personalizadas.

Exemplo: 'OpenSansBold', Helvetica, Arial, sans-serif
Para hospedar suas fontes personalizadas, você pode usar um serviço como o Google Fonts ou hospedá-las você mesmo.

Para situações em que suas fontes personalizadas não são compatíveis, você deve selecionar fallbacks que estão incluídos na maioria dos computadores. Esses fallbacks definem quais fontes serão exibidas se o cliente de e-mail não for compatível com as fontes personalizadas. Aqui está um site para fontes alternativas: https://www.cssfontstack.com/

 

Configuração de CSS para e-mails


Observação: talvez seja necessário entrar em contato com um desenvolvedor para obter assistência se você não tiver o conhecimento necessário.

A maneira mais confiável de incluir uma fonte específica em seu e-mail é usar @font-face. Veja abaixo onde pode-se incluir este código.

 

Construtor de e-mails:

  • Para acessá-lo, navegue até o menu lateral Marketing, selecione o menu Campanhas ou Modelos na guia E-mails.
  • Crie um modelo de e-mail ou edite um previamente criado do tipo Editor de Design para que seja carregado o construtor de e-mails.
  • Você pode incluir o código ao clicar no botão Aparência, então expanda a opção CSS personalizado.
  • Clique no botão Save para guardar as alterações no código.

 

Ação (Action) Enviar E-mail - fluxo de trabalho:

  • Para acessá-lo, navegue até o menu lateral Automação.
  • Crie um novo fluxo de trabalho ou edite um previamente criado.
  • Dentro do Construtor, selecione uma ação Email ou apenas crie uma clicando no botão +.
  • Você pode incluir o código ao clicar no botão Código fonte localizado na área da edição da mensagem.
  • Clique no botão Salvar para guardar as alterações no código.

 

Código utilizado nos exemplos: 

  
  <style>
    @font-face {
      font-family: 'Festive', cursive;
      src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
    }
    * { font-family: 'Festive', cursive; }
  </style>

 

Observações:

  • Ao trabalhar com o Outlook, você precisa envolver esse @font-face em uma tag @media. Isso se deve ao fato de o Outlook 2007, 2010 e 2017 não oferecer suporte a elas.
  • Se você quiser usar a fonte personalizada no construtor, poderá copiar o código da fonte personalizada e criar um valor personalizado para ela e usar o valor personalizado.