> For the complete documentation index, see [llms.txt](https://docs.globalnetflow.com/biblioteca-de-ajuda/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globalnetflow.com/biblioteca-de-ajuda/e-mail-e-smtp/usando-fontes-personalizadas-no-construtor-de-e-mails.md).

# 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.

<br>

**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:

<https://www.cssfontstack.com/>

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...](https://fonts.googleapis.com/css2?family=Festive\&display=swap)') }

\* { font-family: 'Festive', cursive; }

\</style>

Quando você estiver no construtor de e-mail, adicione CSS personalizado na guia Aparência

<br>

<figure><img src="https://3215928470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTLOPQzxoKpBmEidPnB3H%2Fuploads%2Fh21kcqsODxC2WFTdSsfl%2Fchrome_8m5Td19QWm.png?alt=media&amp;token=500ad631-e14a-4aa9-b310-670a4cf2713b" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="https://3215928470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTLOPQzxoKpBmEidPnB3H%2Fuploads%2FxVemslCf0ffPZyYRqap2%2Fchrome_8zchXBNkTB.png?alt=media&amp;token=05bb95ce-9de7-4803-a36d-22ca6e06beed" alt=""><figcaption></figcaption></figure>

***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.*