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.
Procurando informações sobre como usar fontes personalizadas? Saiba como usar fontes personalizadas.
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á 2 maneiras 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 a partir 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.
O suporte a fontes da web depende do aplicativo de e-mail, da versão dele e do tipo de conta de e-mail. Alguns exemplos de clientes com suporte a fontes da web incluem:
- Apple Mail
- iOS Mail (o app de e-mail padrão no iOS)
- Alguns apps de e-mail para Android (o suporte varia conforme o app; o Android 2.3 não aceita o método
@importusado pelas fontes Google e Adobe) - Samsung Email no Android, exceto ao usar um endereço de e-mail da Microsoft, como Outlook.com ou Hotmail
- Outlook para Mac 2011 e 2016; o Outlook para Mac 16.80 não oferece suporte a fontes da web
O Gmail, incluindo o app do Gmail no Android, geralmente não é compatível com fontes da Web. O webmail do Gmail para desktop pode exibir Roboto e Google Sans porque o Gmail as inclui nos próprios estilos. Isso não significa que o Gmail consiga carregar outras fontes personalizadas do seu e-mail. Defina uma fonte alternativa e teste seu e-mail nos apps do Gmail que seus destinatários usam.
Para detalhes por aplicativo de e-mail e versão, consulte a tabela de suporte a fontes da Web do Can I email.
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 > Mídia e marca > Marca: selecione Fontes. Se você vir Estilo no lugar, selecione-o para encontrar a seção Fontes.
- O painel Editar estilos no editor de modelos de e-mail
- A barra de ferramentas de formatação de texto ao editar texto em um bloco de texto ou os controles de fonte em outros blocos que contêm texto
- O painel Editar estilos no editor de formulário de registro
3 das fontes que a Klaviyo oferece não são compatíveis com alguns dispositivos: Century Gothic, Tahoma e Arial Black. Essas fontes não vêm pré-instaladas em dispositivos iOS (por exemplo, iPhones). Se a fonte selecionada não estiver disponível, o dispositivo usa a próxima fonte disponível na lista de fontes de fallback da Klaviyo, o que pode mudar a aparência do seu e-mail.
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 composto só por imagens possa prejudicar sua entregabilidade, você pode usar estrategicamente uma combinação de texto nas imagens e texto em blocos de texto para criar um e-mail alinhado à sua marca. Escolha uma fonte personalizada e da sua marca para seus títulos e chamadas à ação (CTAs) e combine-a com uma fonte compatível com a web para usar no corpo do texto. Mantenha também as informações essenciais e a CTA principal em blocos de texto ou de botão, para que os destinatários possam usá-las mesmo que as imagens não carreguem.
Use imagens que contenham a fonte da sua marca para trechos selecionados de texto e não se esqueça de adicionar texto alternativo quando inserir as imagens no seu e-mail. Depois, aplique a fonte compatível com a web ao restante do texto no seu e-mail. Isso permite que você use a fonte da sua marca, enquanto mantém o restante do seu e-mail legível quando as imagens não carregam.
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
- How to add custom fonts in email templates
Learn how to add new fonts to the Klaviyo email template editor so that your emails match your brand style. In this article, you’ll also learn about the tradeoffs when using custom fonts, and how to choose a font supported by the widest range of inboxes.
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- How to update your brand styles in Klaviyo
Learn what to update in Klaviyo when rebranding or refreshing your brand’s design.