Como usar Fontes em E-mails – SharpSpring Brasil

Escolher a fonte certa para sua campanha de marketing é uma decisão muito importante.

A fonte impacta diretamente na aparência e no sentimento da sua página, auxilia a ajustar o tom da mensagem e, em última instância, ela afeta o modo como o seu lead interpreta a sua mensagem.

Este artigo fornece informações acerca da importância das fontes nos e-mails.

Usuários com acesso:

Administradores
Gerentes da Empresa
Gerentes de Marketing

Fontes Seguras e Fontes da Web

Tecnicamente, você pode incluir qualquer fonte em um e-mail. No entanto, caso o destinatário não tenha a fonte instalada, ele não poderá ver o e-mail como você gostaria.

As fontes da web não são pré-instaladas no sistema do usuário. As fontes da web são baixadas pelo navegador enquanto a página é carregada, e então são aplicadas ao texto. Caso haja um erro no download ou na aplicação da fonte da web, o texto não será exibido adequadamente.

Desde o final dos anos 90, a Macintosh e a Windows já possuíram 18 fontes compartilhadas. Essas fontes normalmente são pré-instaladas no computador do usuário. Assim, estas têm sido denominadas de fontes seguras. Geralmente, toda plataforma de e-mail possui essas fontes pré-instaladas, para que estejam disponíveis quando um e-mail for carregado para o cliente. Segue as 18 fontes seguras de e-mail:

Fontes para Dispositivos Móveis

Os dispositivos móveis também utilizam fontes seguras e fontes da web. Segue abaixo as fontes disponíveis para serem utilizadas nos dispositivos móveis:

Utilizando as Fontes

Por mais que 18 fontes pode parecer limitante, existem meios para colocar fontes personalizadas e configurar mecanismos para garantir que a sua mensagem seja visualizada de forma adequada. Fontes podem ser aplicadas em e-mails tanto no estilo do head quanto no CSS inline. O estilo colocado no head pode ser aplicado a diferentes classes e IDs. Quando esses IDs e classes forem referenciados no corpo do e-mail, o estilo é carregado. O CSS inline é colocado diretamente no elemento HTML que contém o texto a ser exibido em tal estilo.

Nota: a SharpSpring oferece Serviços Profissionais para assistir na codificação personalizada.

<style> no <head>

Aplicar style ao head é um método fácil de transmitir uma fonte para todo o seu e-mail ou para uma classe específica. Funciona em todas as plataformas de e-mail, com exceção do Gmail (pois não é possível utilizar a tag <style> no <head> ), por isso é recomendado incluir estilos inline para abarcar os usuários do Gmail.

<style type="text/css">
           body {
                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
                font-weight: 300; 
                margin: 0px;
                background-color: #ffffff;
                }
      </style>

Em Células de Tabelas

Você pode aplicar um estilo de fonte em todo o texto de uma célula de tabela, colocando CSS inline na tag TD do seu HTML. Usar este método afeta o conteúdo inteiro da célula, independentemente da quantidade.

Em Texto com <span>

Dentro do seu conteúdo, é importante controlar o estilo de uma palavra específiica ou de uma seção de texto. Usando o <span> você pode aplicar um atributo de estilo em apenas uma palavra ou em um grupo de palavras.

Estoques de Fontes

Você pode declarar qualquer fonte que você gostaria em um e-mail. Caso o destinatário tenha a fonte instalada, o e-mail a exibirá como esperado. No entanto, caso o destinatário não possua a fonte, uma fonte padrão será usada em seu lugar. Felizmente, você pode priorizar uma lista de fontes reservas para serem exibidas quando a fonte original não estiver disponível.

<span style="font-family:'Architects Daughter',cursive,'Verdana','Helvetica';">Hello world!</span>

Fontes Personalizadas

Caso haja fontes que você, absolutamente, precisa estar utilizando, você pode usar o método @import no seu CSS. No entanto, existem algumas limitações ao usar o @import , já que este não é compatível em todos as plataformas de e-mail. As plataformas mais utilizadas, como Gmail, Outlook.com e Aol.com não permitem o @import . Entretanto, é possível utilizar em dispositivos iOS, no Apple Mail e no Thunderbird. O Outlook, por sua vez, limitou o suporte do @import e, em alguns casos, dependendo da versão, pode não suportar completamente.

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Architects+Daughter);