Como adicionar fontes personalizadas em 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 vai saber quais são as vantagens e desvantagens de usar fontes personalizadas e como escolher uma fonte compatível com a maior variedade de 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, tenha em mente que apenas algumas caixas de entrada de e-mail são compatíveis com fontes personalizadas, e muitos clientes populares (como Gmail e Yahoo) não são.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Termos-chave

• Fonte personalizada
  Qualquer fonte que não seja fornecida por padrão no editor da Klaviyo
• Fonte web
  Uma fonte personalizada que deve ser carregada de uma fonte externa
• Fonte segura para a web
  Fonte armazenada localmente na maioria dos dispositivos e, portanto, 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 e-commerce. 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 grande maioria dos computadores e dispositivos, então você pode 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 isso, considere selecionar 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, junto com uma análise do suporte 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, clique em Adicionar fonte na parte inferior do menu suspenso.
3. No modal que aparece, escolha Google Font, Adobe Font ou Importar fonte, dependendo da origem da fonte.
4. Siga as instruções nas seções abaixo para seu tipo de fonte (Google, Adobe ou Fontes importadas).

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.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Adicione variantes de fontes a uma fonte personalizada existente

É possível editar, excluir ou atualizar as variantes selecionadas para suas fontes personalizadas em Marca & Imagens > Fontes.

Como atualizar uma fonte existente

Para selecionar variantes adicionais de uma fonte personalizada do Google ou de uma fonte importada que você já adicionou:

1. Na Klaviyo, navegue até Conteúdo > Imagens e marca.
2. Clique em Fontes.
3. Localize a fonte que você gostaria de editar abaixo de 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 você gostaria de editar abaixo de 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 a fonte novamente, esses e-mails vão começar a usá-la de novo.

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 este 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 você não tiver acesso a uma equipe de programadores, recomendamos encontrar uma fonte do Google ou da Adobe que seja 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 modal Adicionar fonte e cole o URL de hospedagem no campo Endereç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 verão as seguintes fontes:

• Os destinatários que abrirem seu e-mail em um navegador compatível com 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 no seu modelo, inclusive:

• Nos estilos principais do seu modelo
• Em qualquer estilo 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 com o texto ao qual deseja 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 Email on Acid para visualizar em uma variedade maior de dispositivos.

Recursos adicionais

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