Usando fontes personalizadas no Construtor de E-mails
E-mail e SMTP
Ao criar seu próprio sistema de design de e-mail em HTML, você pode querer usar uma fonte personalizada além das 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 substituto sólido.
Suporte ao cliente por e-mail
A primeira consideração a ser levada em consideração ao trabalhar com fontes personalizadas é que o suporte ao cliente de e-mail é irregular. Os seguintes clientes de e-mail suportam fontes personalizadas:
Apple Mail
iOS Mail
Samsung Mail
Outlook.com
É importante definir uma pilha de fontes ao usar fontes personalizadas. Isso deve incluir algumas fontes padrão do sistema para garantir que seu e-mail seja processado 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 suportadas, você deve selecionar alternativas incluídas na maioria dos computadores. Esses fallbacks definem quais fontes serão exibidas se o cliente de e-mail não oferecer suporte a fontes personalizadas. Aqui está um site de fontes alternativas:
CSS configurar para e-mails
Observação: pode ser necessário entrar em contato com um desenvolvedor para obter assistência se você não tiver experiência.
A maneira mais confiável de incluir uma fonte específica em seu e-mail é usar @font-face. Abaixo está um exemplo disso em ação:
<style> @font-face { font-family: 'Festive', cursive; src: url('https://fonts.googleapis.com/c...') }
* { font-family: 'Festive', cursive; }
</style>
Quando você estiver no construtor de e-mail, adicione CSS personalizado na guia Aparência
Ao usar o criador de e-mail em um fluxo de trabalho, você também pode adicionar um código personalizado. Veja a captura de tela abaixo:
Observação: ao trabalhar com o Outlook, você precisa envolver este @font-face em uma tag @media. Isso ocorre porque o Outlook 2007, 2010 e 2017 não os suporta.
Observação: se você quiser usar a fonte personalizada no construtor, pode copiar o código da fonte personalizada, criar um valor personalizado para ela e usar o valor personalizado.
Last updated
