Como funcionam as fontes no e-mail

O que você vai aprender

Saiba mais sobre as oportunidades e limitações do uso de fontes online e como enviar e-mails alinhados à sua marca.

Como as fontes funcionam

Fontes são representações de texto e podem ser usadas em mídia impressa ou online. Você talvez conheça algumas das fontes mais comuns, como Arial ou Times New Roman, mas há milhares de outras fontes que você pode usar para comunicar e representar sua marca.

Com mídias online (como sites ou e-mails), suas opções de fontes são praticamente ilimitadas. No entanto, quando você compartilha sua criação com outra pessoa, ela pode não parecer exatamente igual, porque nem todos os dispositivos têm acesso às mesmas fontes.

Há duas formas principais de um dispositivo acessar e usar uma fonte: fontes do sistema (ou seja, fontes armazenadas no dispositivo que você está usando) e fontes da web (ou seja, fontes carregadas de um servidor externo)

Sobre as fontes do sistema

Computadores e celulares vêm com uma variedade de fontes pré-instaladas. Há algumas fontes comumente instaladas (a maioria dos dispositivos vem com Georgia e Verdana, por exemplo), mas os dispositivos podem variar bastante no que incluem por padrão. Fontes usadas pela maioria dos dispositivos são chamadas de fontes "web-safe".

Sobre fontes da web

Diferentemente das fontes seguras para a web, as fontes da web são carregadas de um servidor externo ao mesmo tempo que o conteúdo que você está visualizando. Fontes personalizadas geralmente são fontes da web. Se você usar uma fonte da web, também vai querer definir uma fonte segura para a web como alternativa, caso um dispositivo específico não consiga carregar sua fonte da web.

Sobre as fontes alternativas

Quando você vê algo online, seja uma página da web ou um e-mail, há CSS (código usado para estilizar conteúdo online) nos bastidores que diz ao seu dispositivo qual fonte exibir. Se seu dispositivo não conseguir acessar a fonte, ele verificará o CSS em busca de uma "fonte de fallback" (uma fonte, ou fontes, selecionada pela pessoa que criou o site ou a mensagem de e-mail, para ser usada caso a fonte preferida não estivesse disponível). As fontes de fallback devem ser fontes seguras para web que a maioria dos dispositivos consegue usar. Elas dão a você mais controle sobre como sua mensagem aparece quando alguém a visualiza em um dispositivo que não é compatível com fontes personalizadas/para web.

Se não houver uma fonte de fallback disponível ou se a fonte de fallback não for compatível com o dispositivo que está sendo usado, o dispositivo usará uma fonte padrão, como Arial ou Times New Roman. As fontes padrão variam muito entre dispositivos e aplicativos.

Como as fontes funcionam no e-mail

Alguns clientes de e-mail são compatíveis com fontes da web, mas outros não. Quando alguém abre seu e-mail em uma caixa de entrada ou dispositivo que não é compatível com fontes da web, essa pessoa verá uma fonte padrão. Você pode controlar quais fontes do sistema serão usadas como substitutas definindo uma fonte de fallback.

Se alguém abrir seu e-mail em um dispositivo que aceita fontes da web, ele vai carregar a fonte do URL fornecido no CSS do seu e-mail. Se o dispositivo conseguir acessar a fonte, ele vai exibi-la; caso contrário, vai passar para as fontes alternativas.

Os seguintes clientes de e-mail aceitam fontes da web (personalizadas):

• 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

Observe que o Gmail, um dos maiores clientes de e-mail, geralmente não oferece suporte a fontes da web. No entanto, há uma exceção: o Gmail oferece suporte ao Roboto.

Otimização de fontes nos seus e-mails

A melhor forma de garantir que seu e-mail tenha uma aparência consistente em todos os dispositivos é usar uma fonte compatível com a web. As fontes padrão do Klaviyo geralmente são compatíveis com a web. Encontre as fontes que a Klaviyo disponibiliza em:

• Conteúdo > Imagens e marca > Ativos da marca
• A aba Estilos dos seus e-mails
• A seção Estilos de qualquer bloco de e-mail que contenha texto
• A guia Estilos do editor do formulário de registro

Dicas para usar fontes personalizadas

Se você preferir usar uma fonte personalizada, use as dicas abaixo para garantir que seus e-mails tenham um bom design em todos os dispositivos.

Usar fontes alternativas

Selecione uma fonte de fallback segura para a web que corresponda o máximo possível à sua fonte personalizada. Você pode selecionar uma fonte de fallback entre as fontes padrão do Klaviyo ao configurar a fonte personalizada.

Use texto em imagens

Embora um e-mail só com imagens possa prejudicar sua entregabilidade, você pode usar estrategicamente uma combinação de texto em imagens e texto em blocos de texto para criar um e-mail que se alinhe à sua marca. Escolha uma fonte personalizada e com a sua marca para seus títulos e chamadas à ação (CTAs) e combine-a com uma fonte segura para a web para usar no corpo do texto.

Use imagens que contenham a fonte da sua marca para textos selecionados e garanta que você adicione texto alternativo quando adicionar as imagens ao seu e-mail. Em seguida, aplique a fonte segura para web ao restante do texto do seu e-mail. O resultado é um e-mail com a sua marca que combina com seu site e, ao mesmo tempo, é acessível para as caixas de entrada dos seus assinantes.

Teste completamente

Independentemente de quais métodos você escolher, teste seus e-mails com atenção, especialmente ao usar um novo design. Envie o e-mail para você mesmo em vários dispositivos para garantir que você esteja satisfeito com a forma como ele aparece em cada um. Você também pode usar programas de teste de e-mail como Litmus ou Email on Acid para testar em uma variedade maior de dispositivos.

Recursos adicionais