A ferramenta de envio de email marketing da Templateria agora se chama Zenmail e tem um site dedicado a ela.

Insights de email marketing

Como usar webfonts no email marketing

Pode aposentar a Arial. Webfonts otimizam o layout permitindo que os textos permaneçam visíveis e bonitos mesmo com as imagens do email marketing bloqueadas.

Você já deve ter questionado a possibilidade de usar, no layout do email marketing, fontes que não sejam aquelas mais comuns em sistemas operacionais. Uma boa tipografia valoriza o design, chama a atenção dos destinatários e garante até uns cliques a mais na sua peça. Mas não estou falando de usar imagens que contém textos formatados em fontes especiais, mas sim, de usar webfonts no email marketing.

envie seu email marketing agora!

crie sua conta no Zenmail, conheça a plataforma e escolha o melhor plano para começar seus envios.

Quando o texto está escrito direto no código, em vez de “embutido” em uma imagem, ele tem a capacidade de se reorganizar em quebras de linhas e até em tamanhos diferentes quando o email é visualizado em telas pequenas como as dos smartphones, permanecendo legível para o destinatário.

Mas nem sempre aquelas fontes mais conhecidas de sempre – Arial, Verdana, Times etc – deixam o email bonito e diferenciado da concorrência. Uma solução para isso está nas webfonts, que são fontes que ficam hospedadas em um servidor externo e podem ser utilizadas tanto em websites quanto em email marketing.

O suporte às webfonts no email marketing ainda não é total por causa das limitações dos programas de email. Mas eles vêm evoluindo cada vez mais rápido e já temos configurações alternativas para oferecer quando as fontes especiais não puderem ser exibidas. Então vamos deixar o medo de lado e começar a tirar proveito das webfonts no email marketing!

Quais serviços de webfonts podem ser usados no email marketing?

Existem muitos serviços de webfonts disponíveis na internet, mas nem todos são adequados para o uso em email marketing. Isso porque, para usar as webfonts no email marketing, é necessário que elas estejam hospedadas em algum lugar da web que forneça seu endereço. Daí, no cabeçalho do HTML, inserimos a instrução de que nossos textos estarão formatados nessa fonte especial, que estará disponível no tal endereço.

A questão é que existem diferentes formas de inserir, no email marketing, essa instrução de onde está hospedada a fonte especial. É possível usar a tag link do HTML, as propriedades @import e font-face do CSS ou mesmo um javascript. Essa última maneira é impossível de ser usada em email marketing porque todos os programas de email bloqueiam o funcionamento de javascript. O Gmail, por exemplo, pode até considerar suspeito de phishing o email marketing que tem javascript presente em seu código.

Os dois serviços de webfonts mais usados atualmente são o Google Fonts e o Adobe Fonts. Ambos fornecem o endereço de referência da webfont usando a tag link do HTML ou a propriedade @import do CSS, além de terem uma enorme variedade de fontes à disposição.

Além desses serviços, as próprias casas tipográficas e lojas que comercializam fontes mais exclusivas podem oferecer esses mecanismos para uso da versão web da fonte, geralmente, mediante custo adicional. Sites como MyFonts, FontShop, Fonts.com e outros, organizam seu catálogo conforme as versões disponíveis de arquivo das fontes, como OTF (Open Type), TTF (True Type), PFB (PostScript) e WOFF (Web Open Font Format), este último um formato específico para a web.

Adicionando a webfont ao HTML do email marketing

Depois que você já escolheu qual fonte vai utilizar, é a hora de adicioná-la ao seu HTML e garantir que ela seja renderizada da melhor forma pelos clientes de email. Para isso, existem 3 formas:

Usando @import

Essa é uma instrução para o arquivo HTML do email marketing importar o conteúdo que está nessa URL, como uma requisição para o programa de email acessar esse endereço e trazer, para dentro do email, a fonte desejada. Como mais adiante, no corpo body do HTML, estarão as instruções dos textos que devem ser formatados com essa fonte, esse endereço presente no @import é a referência de onde a fonte está localizada.

Sem a referência de onde a fonte está hospedada, o programa de email vai procurar, entre as fontes instaladas no sistema operacional usado pelo destinatário, uma fonte que tenha o nome indicado na formatação do texto no HTML. Por tratar-se de uma fonte especial, dificilmente as pessoas já terão essa fonte instalada em seus computadores. Além disso, muito provavelmente, o email marketing será visualizado a partir de um smartphone ou tablet, que não trazem fontes especiais instaladas em seus sistemas e nem permitem a instalação de fontes externas.

Vale lembrar que o @import é um elemento CSS, então deve ficar sempre dentro de uma tag <style> no head do seu HTML.

Na instrução, importamos a fonte Calistoga pelo Google Fonts, e a formatação de nossos textos com ela, no corpo do HTML, fica assim:

Veja que no atributo font-family, estamos chamando a fonte pelo nome ‘Calistoga’, e esse nome não fomos nós quem escolhemos. Como essa é uma fonte do Google Fonts, nas próprias instruções de importação da fonte usando @import ou link estão também as instruções de como devem ser formatados os textos que queremos que usem essa fonte. Toda a instrução font-family: 'Calistoga', cursive; foi fornecida pelo próprio Google Fonts.

Usando a tag <link>

A tag link tem funcionamento similar ao recurso @import do CSS. Quando se fala em performance de websites, o uso de link é preferível em relação ao @import, mas como um email marketing tem muito menos recursos do que um site, escolher um ou outro método não vai ter um impacto significativo na sua velocidade de renderização.

Como o ambiente dos programas de email é mais hostil do que os navegadores em termos de capacidade de renderização de HTML e CSS, nós sempre vamos optar pela maneira que tem mais suporte dos programas de email. Mas, atualmente, não há uma preferência clara dos programas de email pelo @import ou link: ambos ainda são pouco suportados.

Só é importante consultar sua plataforma de envios para saber se ela suporta esses dois recursos ou apenas um. É que alguns sistemas de envio de email marketing podem alterar o HTML do template removendo ou inserindo novas instruções. Há plataformas que podem remover todas as referências de @import e/ou de link presentes no email marketing.

Usar a tag <link> é simples: assim como o @import, ela vai dentro do head do seu HTML, mas fora da tag style por tratar-se de uma tag do HTML, e não de uma propriedade do CSS. Os serviços de webfonts também costumam fornecer tudo pronto para você inserir a instrução da fonte especial com link. No nosso caso, usando a mesma fonte Calistoga, a inserção fica assim:

A formatação de nossos textos com essa fonte, no corpo do HTML, é feita da mesma maneira:

O que é curioso, e também muito triste, é que o Gmail não suporta mais o uso de webfonts, nem mesmo do Google Fonts. Até certo tempo atrás suportava, mas desde uma grande atualização que o Gmail sofreu no final de 2018, quando trouxe o recurso de composição inteligente de mensagens, essa característica desapareceu.

Usando @font-face

O recurso @font-face pertence ao CSS3, e é a maneira que devemos utilizar quando temos conosco o arquivo original da fonte que desejamos usar, sem que eles estejam hospedados em algum serviço como o Google Fonts ou o Adobe Fonts.

O @font-face é a forma que usamos quando nós mesmos vamos hospedar nossos arquivos de fontes, e com ele vamos indicar tanto a URL do arquivo onde as configurações desta fonte estão quanto o nome que vamos dar a essa fonte, que é o mesmo nome que vamos usar na instrução de formatação dos textos no corpo do HTML.

Assim como acontece com @import e link, a aceitação do font-face pelos programas de email ainda é muito baixa, funcionando apenas nos aparelhos iOS (iPhone, iPad, iPod Touch), Apple Mail, Samsung Mail e Outlook 2011 (existente para Mac OS).

Da mesma forma que o @import, o @font-face deve estar dentro de uma tag <style> no head do seu HTML.

Determinando uma fonte alternativa à webfont no email marketing

Nas instruções que demonstramos anteriormente, você deve ter percebido que o código de formatação do texto com font-family apresenta uma listinha de fontes:

font-family: 'Calistoga', cursive;

Isso significa que nós queremos que o texto seja exibido na fonte Calistoga. Mas e quando ela não puder ser localizada? Temos que oferecer alternativas de fontes a serem usadas para as situações em que a fonte principal não possa ser exibida.

Isso acontece quando o programa de email não suporta os recursos de importação da webfont, quando esse recurso foi removido pela plataforma de envios, pelo programa de email ou quando o servidor que hospeda essa fonte está indisponível.

No código font-family: 'Calistoga', cursive;, o item cursive não é o nome de uma fonte específica, mas indica que a nossa fonte principal é do tipo cursiva e, na sua ausência, pode-se exibir o texto na fonte cursiva que for padrão no sistema operacional usado pelo destinatário.

Se quisermos ter algum controle sobre a fonte alternativa, podemos complementar essa lista de fontes na instrução do font-family, dessa maneira:

font-family: 'Calistoga', Tahoma, cursive;

Nesse exemplo, estou indicando que, caso a webfont Calistoga não possa ser usada, a Tahoma pode servir. Tahoma é uma fonte presente na maioria dos sistemas operacionais de computadores. Mas se nem a Tahoma estiver presente, então a fonte cursiva padrão do dispositivo deve ser usada.

Cuidado com a escolha da fonte alternativa

No lugar da fonte padrão cursive, você pode usar sans-serif para indicar uma fonte sem serifa, serif para uma fonte com serifa, monospace para uma fonte monoespaçada (ex.: Courier) ou fantasy para uma fonte do tipo “fantasia” (ex.: Comics Sans).

Mas mesmo essas declarações “genéricas” só vão funcionar se, no aparelho usado pelo destinatário para ver o email, existirem fontes desse tipo instaladas. Nos tablets e smartphones, por exemplo, o único padrão de fonte que existe é sans-serif.

A seguir, veja como dois programas de email mostram de forma diferente um mesmo texto formatado com a fonte Calistoga no HTML do email marketing:

Comparação entre a exibição de um texto formatado em webfont no email marketing no Samsung Mail com o Gmail app

O texto se apresenta de maneira diferente no Gmail app do iPhone e no Samsung Mail. O Samsung Mail suporta webfonts, então exibiu o texto formatado na fonte Calistoga. Já o Gmail app não suporta a webfont e tampouco tem a opção de uma fonte cursiva padrão, então ele exibiu o texto na sua única fonte padrão, que é algo próximo à Arial.

Dependendo da webfont das fontes alternativas definidas, pode haver uma grande diferença na exibição de seus textos em um e outro programa de email. Como cada fonte tem suas próprias características estéticas, o tamanho e as distâncias entrelinhas e entreletras serão diferentes. Por isso, é importante que você preveja o layout do seu email marketing com os textos formatados tanto na webfont quanto nas fontes alternativas para saber como o layout será exibido quando a fonte especial faltar.

Meu fallback não está funcionando no Outlook, e agora?

Um problema enfrentado nas versões 2010, 2013 e 2016 do Outlook é que eles simplesmentes ignoram qualquer fonte alternativa determinada na lista do font-family e exibe o texto formatado em Times New Roman, mantendo as demais formatações indicadas no CSS, como tamanho, cor, itálico, negrito etc.

Uma forma de corrigir isso é utilizar os conditional comments do Outlook para determinar uma regra de fonte específica para esse programa de email, ignorando a fonte especial e sobrescrevendo o padrão da Times New Roman. Como algumas dessas versões do Outlook também não suporta o uso de classes do CSS, podemos redefinir as características de todas as tags do HTML que são capazes de receber textos, e atribuir a elas uma fonte de sistema que o Outlook possa usar.

Fica dessa forma:

Essa instrução deve ser inserida no cabeçalho head do HTML e será interpretada por todas as versões do Outlook a partir da versão 2000. Os outros programas de email vão ignorar essa instrução.

Você pode saber mais sobre tipografia no email marketing aqui.

Receba nossa newsletter

Cadastre-se e fique por dentro das nossas novidades e do universo do email marketing! Nossa newsletter é enviada, no máximo, uma vez por mês, você pode se descadastrar a qualquer momento e seu endereço de email está seguro conosco.

Newsletter da Templateria

Receba em seu email conteúdos exclusivos sobre email marketing: