Por Flávia Pezoti*
Você com certeza já se deparou com a vontade ou a necessidade de usar fontes que não sejam as de sistema no seu email marketing. Fontes especiais valorizam o layout, chamam a atenção dos destinatários e, quem sabe, garantem até uns cliques a mais na sua peça. Uma das formas mais comuns de utilizar essas tipografias é através de imagens, simulando o texto escolhido. Mas em clientes de email que bloqueiam as imagens, muita informação pode ser perdida no momento da abertura e, sua campanha pode não atingir os mesmos resultados que teria se seu título, por exemplo, estivesse em texto.
A solução pra isso são as WebFonts, que são fontes que ficam hospedadas em um servidor externo e podem ser utilizadas no seu email marketing. O suporte ainda não é global, mas tem progredido bastante e, com os fallbacks corretos, as WebFonts já têm muito a nos oferecer.
Quais serviços de WebFonts podem ser usados?
Existem muitos serviços de WebFonts disponíveis pela internet, mas nem todos são adaptáveis para o uso em email. Por exemplo, o Typekit da Adobe e o Fontdeck dependem do uso de tecnologias não suportadas por praticamente nenhum cliente de email para funcionar (ex. Javascript), o que os torna incompatíveis para deixar nossas campanhas ainda mais bonitas.
O queridinho dos designers e developers do ramo é o Google Fonts. Além de ser gratuito, ele é simples de usar: basta escolher a família que você quer, clicar em “Quick Use” e ele já fornece os códigos que devem ser colocados no HTML. A única desvantagem é a falta de variedade, você dificilmente vai encontrar fontes muito diferenciadas e, devido à sua popularidade, a maior parte das tipografias oferecidas são vastamente utilizadas por toda a web.
Uma lista mais completa das opções disponíveis e suas compatibilidades, você encontra aqui.
Adicionando a fonte ao seu HTML
Depois que você já escolheu qual fonte vai utilizar, é a hora de acrescentá-la em seu HTML e garantir que ela seja renderizada da melhor forma pelos clientes de email. Para isso, existem 3 formas:
1. Usando @import É a opção que nós recomendamos para uso geral, pois possui o maior suporte dentre os principais clientes e a maior parte dos serviços de WebFonts já fornece o código pronto para inserção. De uma forma clara, consiste em importar o conteúdo de uma url (no caso, a sua fonte) para ser utilizado durante o desenvolvimento do seu email.
Vale lembrar que o @import é um elemento CSS, então deve ficar sempre dentro de uma tag <style> no head do seuHTML. No nosso exemplo, usando a fonte “Dancing Script” pelo Google Fonts, o código fica assim:
<style type=“text/css”>
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
A aceitação do @import é a seguinte:
2. Usando a tag <link> Tem uma aceitação um pouco menor que a do @import (variando apenas nos clientes menores), mas não fica muito para trás e também é uma ótima opção a ser considerada. Usar a tag <link> é simples: ela vai direto no head do seu HTML e os serviços de WebFonts também costumam fornecer tudo pronto. No nosso caso, a inserção fica assim:
<head>
<title>Testando Fontes Especiais</title>
<link href=‘http://fonts.googleapis.com/css?family=Dancing+Script’ rel=‘stylesheet’ type=‘text/css’>
</head>
Usando a tag <link>, você vai obter o seguinte suporte:
3. Usando @font-face @font-face é um recurso CSS3 em que você adiciona uma nova fonte para sua página/email, determinando um nome para ela e apontando a url do arquivo onde as configurações desta fonte estão. Mas, como tudo que é novo e moderno na web, a aceitação pelos clientes de email ainda é muito baixa, então nós não recomendamos seu uso se sua lista de destinatários não for, em sua maior parte, composta por usuários de IPhone. Mesmo assim, se você insistir no @font-face, seu código ficará mais ou menos assim:
<style type=“text/css”>
@font–face {
font–family: minhaFonte;
src: url(‘url_da_minhaFonte’);
}
</style>
Assim como o @import, o @font-face deve estar dentro de uma tag <style> no head do seu HTML A aceitação do desse recurso é a seguinte:
Usando sua fonte e determinando um fallback.
Se você já escolheu e adicionou sua fonte ao HTML, colocá-la em uso é parte mais fácil de todas. Na hora de determinar ofont-family do seu elemento (de preferência com CSS inline), você coloca o nome da fonte entre aspas simples, seus respectivos fallbacks, e uma opção genérica caso nenhuma das fontes escolhidas esteja disponível.
<tr>
<td style=“font–family:‘Dancing Script’, Helvetica, Arial, sans–serif; color:#0074C8; font–size:30px;“>
Nossa Newsletter Especial
</td>
</tr>
O fallback é a fonte que aparecerá caso a principal não possa ser exibida. Ou seja, em programas de email que não dão suporte para fontes especiais, o texto será escrito utilizando a opção seguinte, se esta não estiver disponível, ele seguirá para a próxima, e assim por diante. Por isso, é muito importante que seu fallback, além de ser uma fonte de ampla aceitação (como fontes de sistema), seja uma fonte que não comprometa a estética do seu email, já que sem dúvida ela será utilizada.
No nosso exemplo, a Helvetica será utilizada nos clientes que não suportam WebFonts, como o Outlook.com. Caso aHelvetica não esteja disponível no computador do destinatário, o programa renderizará o texto na principal fonte sem serifa.
Meu fallback não está funcionando no Outlook, e agora?
Um problema que é enfrentado nas versões 2007, 2011 e 2013 do Outlook é que ele simplesmente ignora o fallback estipulado e renderiza o texto em “Times New Roman”. Uma forma de corrigir essa questão é utilizando os comentários condicionais do Outlook para estipular uma regra de fonte específica para esse programa de email, ignorando a utilização de fonte especial (já que o Outlook não dá suporte para tal) e sobrescrevendo o padrão da “Times”.
<!– [if gte mso 9]>
<style>
.elemento_com_webfont { font-family: Arial, sans-serif !important; }
</style>
<![endif]–>
Por Flávia Pezoti* Publicado originalmente no Blog Templateria.