Fontes web e fontes alternativas seguras nos seus e-mails

Fontes web personalizadas só funcionam no Apple Mail do iOS/MacOS: incorpore-as e defina fontes alternativas seguras para os outros clientes.

Atualmente, a compatibilidade com fontes personalizadas nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS. Tenha isso em mente e procure criar seus e-mails pensando nas fontes personalizadas como “aprimoramento progressivo”.

Vídeo tutorial: incorporar fontes web personalizadas em e-mails HTML exportados do Figma

Este vídeo mostra como incorporar fontes web personalizadas (com alternativas seguras para a web) em e-mails HTML exportados do Figma com o plugin Emailify para Figma.

Incorporar fontes web personalizadas por URL ​

Se você usa fontes personalizadas, precisa adicionar um link direto para a URL do arquivo de fonte .woff ou .woff2. Para isso, clique no botão Configure Fonts no painel Preview do plugin.

Ali você pode colar um link para cada fonte personalizada usada nos seus designs de e-mail (por exemplo, https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), que será incluída como regra CSS @font-face no HTML exportado.

Confira se o link aponta diretamente para o arquivo de fonte web .woff ou .woff2. Se você só tiver o link de uma incorporação CSS, abra esse link no navegador: ali deve aparecer um link url para o arquivo da fonte (por exemplo, https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), que você pode copiar e colar no plugin.

As fontes personalizadas incorporadas só funcionam no Apple Mail do iOS/MacOS. Atualmente, a compatibilidade com fontes personalizadas nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS. Tenha isso em mente e procure criar seus e-mails pensando nas fontes personalizadas como “aprimoramento progressivo”.

Definir e pré-visualizar fontes alternativas seguras para a web ​

Se você usa fontes personalizadas nos seus e-mails, pode definir uma fonte alternativa segura para a web para cada uma. Ela será exibida no lugar da fonte personalizada quando o e-mail HTML for aberto em clientes de e-mail que não são compatíveis com fontes personalizadas.

Você também pode definir fontes alternativas para qualquer fonte do Google ou fonte personalizada no mesmo painel de configurações Configure Fonts.

Se você definiu fontes alternativas seguras para a web para as fontes web personalizadas do e-mail, pode pré-visualizar como elas vão ficar ativando a opção Show Fallback Fonts na parte de baixo da janela de pré-visualização do Emailify.

Lista de fontes alternativas seguras para a web ​

Abaixo estão as fontes seguras para a web que você pode definir para as fontes web personalizadas usadas nos seus designs de e-mail do Figma. Como as fontes personalizadas incorporadas só funcionam no Apple Mail do iOS/MacOS, as fontes alternativas que você escolher abaixo definem qual fonte aparece em todos os outros clientes de e-mail (por exemplo, Outlook, Gmail etc.), que infelizmente não são compatíveis com fontes personalizadas.

Fontes alternativas seguras para a web sem serifa ​

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

Fontes alternativas seguras para a web com serifa ​

  • Georgia
  • Times New Roman

Fontes alternativas seguras para a web monoespaçadas ​

  • Courier New

Usar fontes do Google nos seus e-mails ​

O Emailify inclui automaticamente o código @import das fontes do Google nas exportações HTML de todas as camadas do Figma que usam uma fonte da biblioteca Google Fonts, que o Figma inclui por padrão.

As fontes do Google só aparecem nos clientes de e-mail compatíveis com @font-face em e-mails. Nos clientes que não são compatíveis com fontes personalizadas, uma fonte alternativa segura para a web (por exemplo, “Arial”, “Georgia” ou “Courier”) é carregada automaticamente no lugar.

As fontes do Google só funcionam no Apple Mail do iOS/MacOS. Atualmente, a compatibilidade com fontes personalizadas nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS. Tenha isso em mente e procure criar seus e-mails pensando nas fontes personalizadas como “aprimoramento progressivo”.

Fontes personalizadas nas suas imagens. Se você precisa garantir que uma fonte personalizada fique visualmente igual em todos os clientes de e-mail, vale a pena colocar as camadas de texto dentro de um frame “Image”. Esse texto será exportado como parte da própria imagem e, portanto, não vai depender da compatibilidade com fontes web personalizadas para ser exibido corretamente.