Como adicionar fontes personalizadas a modelos de e-mail

O que você vai aprender

Aprenda a adicionar novas fontes ao editor de modelos de e-mail da Klaviyo para deixar tudo com o estilo da sua marca. Neste artigo, você também verá as vantagens e desvantagens de usar fontes personalizadas e como escolher uma fonte aceita na maioria das caixas de entrada. 

Você pode usar fontes do Google Fonts, do Adobe Typekit ou fontes importadas (ou auto-hospedadas) no seu e-mail. No entanto, somente alguns servidores de e-mail são compatíveis com fontes personalizadas; muitos serviços populares (como Gmail e Yahoo) não são compatíveis. 

Termos-chave

• Fonte personalizada
  Qualquer fonte não fornecida por padrão no editor da Klaviyo. 
• Fonte web
  Fonte personalizada que deve ser carregada de uma fonte externa. 
• Fonte segura para a web
  Fonte armazenada localmente na maioria dos dispositivos, ou seja, que não precisa ser carregada de uma origem externa para ser exibida. 
• Fonte alternativa
  Fonte segura para a web, usada em caixas de entrada que não aceitam sua fonte personalizada.

Limitações de fontes personalizadas

As fontes personalizadas podem ajudar a manter seu marketing coeso, alinhando o conteúdo do e-mail ao seu site de comércio eletrônico. No entanto, as fontes web (carregadas de uma origem externa, em vez de serem armazenadas no dispositivo) podem não aparecer como esperado em todos os dispositivos ou provedores de e-mail. As fontes padrão da Klaviyo são pré-instaladas na maioria dos dispositivos para que você possa oferecer uma experiência consistente a todos os assinantes. 

Provedores de e-mail que aceitam para fontes web incluem:

• Apple Mail
• iOS Mail (navegador de e-mail padrão no iOS)
• Google Android (exceto o Android 2.3, que não aceita o método @import usado pelas fontes Google e Adobe)
• Samsung Mail (Android 8.0)
• Outlook para Mac

Fontes personalizadas no Gmail e outros provedores com restrições

Os destinatários que usam o Gmail, ou outros provedores com restrições para fontes personalizadas, verão uma fonte alternativa, que pode ser definida no modelo de e-mail. Para evitar que isso aconteça, selecione uma fonte personalizada segura para a web, disponível na maioria dos dispositivos, independentemente de aceitarem ou não fontes web. 

Encontre fontes seguras para a web aqui, juntamente com a especificação de restrição por dispositivo. 

Adicione uma nova fonte personalizada ao editor de modelos de e-mail 

Para adicionar uma fonte personalizada a um modelo de e-mail: 

1. Abra um bloco de texto no modelo ou na aba Estilos do modelo.
2. No menu suspenso de fontes, role até a parte inferior da lista e clique em Adicionar fonte.
3. No modal que aparece, escolha Fonte do Google, Fonte da Adobe ou Importar fonte, dependendo do origem da fonte.
4. Siga as instruções nas seções abaixo para o seu tipo de fonte (Google, Adobe ou carregada).

Depois de adicionar uma fonte aos modelos de e-mail, ela ficará disponível para os outros modelos e para os formulários de inscrição.

Adicione variantes de fontes a uma fonte personalizada existente

Você pode editar, excluir ou atualizar as variações das fontes personalizadas em Biblioteca da marca > Fontes.

Como atualizar uma fonte existente

Para selecionar mais variantes de uma fonte personalizada do Google ou de uma fonte importada que já foi adicionada: 

1. Na Klaviyo, navegue até Conteúdo > Imagens e marca.
2. Clique em Fontes.
3. Localize a fonte que quer editar em Suas fontes. 
4. No card dessa fonte, clique nos três pontos no canto superior direito.
5. Clique em Editar no menu que aparece. 
6. Clique em Número de variantes de fontes selecionadas para expandir a lista de variantes de fontes. 
7. Selecione as variantes adicionais que deseja adicionar.
8. Clique em Atualizar fonte.

Não é possível adicionar variantes a uma fonte Adobe depois de carregá-la, pois as variantes são incorporadas no seu link do Typekit.   

Se você receber a mensagem de erro dizendo que já existe uma fonte com esse nome, siga as etapas acima para editar a versão existente da fonte, em vez de adicioná-la novamente. 

Como excluir uma fonte

1. Na Klaviyo, navegue até Conteúdo > Imagens e marca.
2. Clique em Fontes.
3. Localize a fonte que quer editar em Suas fontes. 
4. No card dessa fonte, clique nos três pontos no canto superior direito.
5. Clique em Excluir no menu que vai aparecer. 

Todas as mensagens que usam uma fonte personalizada na Klaviyo serão revertidas para a fonte alternativa. Se você adicionar novamente a fonte, ela voltará a ser usada. 

Adicionar uma fonte do Google

Para adicionar uma fonte do Google:

1. Digite o nome da fonte do Google que você quer usar.
2. Escolha uma fonte alternativa.
3. Clique em Adicionar fonte. 

Adicionar uma fonte Adobe

As fontes Adobe só estão disponíveis para usuários que tenham uma assinatura ativa do Adobe Fonts. Para adicionar uma fonte da Adobe:

1. Clique em Fonte Adobe.
2. Cole seu endereço CSS. O endereço deve seguir o seguinte formato: https://use.typekit.com/123ABC.
3. Escolha uma fonte alternativa.
4. Clique em Adicionar fonte. 

Adicionar uma fonte importada

As fontes importadas, conhecidas como fontes auto-hospedadas, são recomendadas apenas para remetentes que contam com um profissional de programação. Não é possível fazer upload do arquivo da fonte diretamente na Klaviyo. Se não tiver acesso a uma equipe de programadores, busque uma fonte Google ou Adobe semelhante à fonte desejada. 

Para usar uma fonte importada:

1. Hospede a fonte nos seus servidores ou use um serviço de hospedagem de fontes. Habilite o CORS (compartilhamento de recursos entre origens) definindo o cabeçalho Access-Control-Allow-Origin como "*", para que a fonte possa ser acessada pelas caixas de entrada dos destinatários. Saiba mais sobre o CORS.
2. Depois de hospedar a fonte, clique em Importar fonte no modalAdicionar fonte e cole o URL de hospedagem no campoEndereço da origem.
3. Adicione o nome, o peso e o estilo de sua fonte nos campos apropriados.
4. Escolha uma fonte alternativa.
5. Clique em Adicionar fonte. 

Sobre as fontes alternativas

Com as fontes personalizadas, você precisa selecionar uma fonte alternativa. Essa fonte aparecerá para os destinatários que usam provedores que não aceitam sua fonte personalizada. Escolha uma fonte da lista de opções disponíveis que tenha um estilo semelhante à sua fonte personalizada. 

Por exemplo, se você usa Poppins (uma fonte Google) como fonte personalizada e Arial como fonte alternativa, os destinatários de e-mail veem as seguintes fontes: 

• Os destinatários que abrirem o e-mail em um navegador que aceite fontes web (como Apple Mail e iOS Mail) verão a fonte Poppins. 
• Os que abrirem o e-mail em um navegador com restrição para fontes web (como Gmail) verão Arial.

Aplique uma fonte personalizada

Depois de configurar uma fonte personalizada, você pode aplicá-la a qualquer texto em seu modelo, inclusive: 

• Estilos principais de modelo. 
• Estilos de bloco. 
• Partes específicas do texto em um bloco. 
• Blocos de botões, blocos de produtos e outros tipos de blocos que contenham texto. 

Para aplicar uma fonte personalizada em um bloco de texto:

1. Selecione o bloco de texto que contém o texto ao qual o senhor gostaria de aplicar a fonte.
2. Destaque o texto específico ao qual você gostaria de aplicar a fonte.
3. Selecione a fonte personalizada no menu suspenso. 

Para os outros tipos de blocos ou para estilos de blocos e modelos, selecione a fonte no menu suspenso apropriado.

Em blocos de tabelas e blocos divididos, sua fonte personalizada aparecerá no canvas (por exemplo, na visualização da edição), mas não no painel do lado esquerdo. O painel do lado esquerdo exibirá a fonte alternativa em vez da fonte personalizada. 

Visualize suas fontes personalizadas 

Quando o modelo estiver pronto, envie para você mesmo um e-mail de visualização clicando em Visualização e teste > Enviar teste. Tente abrir a mensagem em vários dispositivos para ver como ela vai aparecer para diferentes destinatários. Você também pode usar uma ferramenta como o Email on Acid para visualizar em uma variedade maior de dispositivos. 

Recursos adicionais

• Guia do editor de modelos de e-mail
• Entenda como funcionam as fontes no e-mail