Usando Fontes em E-mails
Última atualização: 6 de novembro de 2024
Este artigo fornecerá informações sobre a importância das fontes em e-mails.
Conteúdo do Artigo
| Teste | ✓ | |
| Essencial | ✓ | |
| Avançado | ✓ | |
| Ultimate | ✓ |
E-mail| Administradores | ✓ | |
| Gerentes de Empresa | ✓ | |
| Gerentes de Marketing | ✓ | |
| Gerentes de Vendas | ||
| Vendedores | ||
| Vendedores Jr. |
Fontes Seguras e Fontes da Web
Tecnologicamente, você pode incluir qualquer fonte em um e-mail. No entanto, se o destinatário não tiver essa fonte instalada, ele não verá o e-mail como você espera que ele veja.
Fontes da web não estão pré-instaladas no sistema do usuário. Fontes da web vêm de uma fonte incluída em uma página. Fontes da web são baixadas pelo navegador enquanto renderiza a página da web e, em seguida, são aplicadas ao texto. Se houver um problema ao baixar ou aplicar a fonte da web, o texto não será exibido corretamente.
Desde a segunda metade da década de 1990, Macintosh e Windows têm 18 fontes comumente compartilhadas. Essas fontes normalmente estão pré-instaladas na máquina do usuário. Como tal, elas foram coletivamente chamadas de fontes seguras. Geralmente, todas as plataformas de e-mail têm essas fontes pré-instaladas, para que estejam disponíveis quando um e-mail é renderizado no lado do cliente. As 18 fontes seguras para e-mail são as seguintes:
| PC | Mac | |||
| Arial | Arial, Helvetica | |||
| Arial Black | Arial Black, Gadget | |||
| Comic Sans MS | Comic Sans MS | |||
| Courier New | Courier New | |||
| Georgia | Georgia | |||
| Impact | Impact, Charcoal | |||
| Lucida Console | Monaco | |||
| Lucida Sans Unicode | Lucida Grande | |||
| Palatino Linotype, Book Antiqua | Palatino | |||
| Tahoma | Geneva | |||
| Times New Roman | Times New Roman, Times | |||
| Trebuchet MS | Trebuchet MS | |||
| Verdana | Verdana, Geneva | |||
| Σψμβολ (Symbol) | Σψμβολ (Symbol) | |||
| Webdings (Webdings) | Webdings (Webdings) | |||
| Wingdings (Wingdings) | Dingbats (Zapf Dingbats) | |||
| MS Sans Serif | Geneva | |||
| MS Serif | New York |
Fontes para Dispositivos Móveis
Dispositivos móveis também utilizam fontes seguras e fontes da web. As seguintes fontes estão disponíveis para uso com dispositivos móveis:
| Móvel | ||
| Arial | ||
| Courier | ||
| Garamond | ||
| Georgia | ||
| Helvetica | ||
| Times New Roman | ||
| Verdana |
Usando Fontes
Embora 18 fontes possam parecer limitantes, existem maneiras de trazer fontes personalizadas e definir substituições para garantir que sua mensagem esteja devidamente marcada. Fontes podem ser aplicadas a um e-mail na tag de estilo do Head ou no CSS inline. Estilos colocados no Head podem ser aplicados a classes e IDs específicos. Quando esses IDs e classes são referenciados no corpo do e-mail, esse estilo é renderizado. O CSS inline é colocado diretamente no elemento HTML que contém o texto que deve ser exibido naquele estilo.
<style> em <head>
Aplicar estilo ao Head é uma maneira simples de transmitir uma fonte em todo o seu e-mail ou em uma classe específica. Funciona em todas as plataformas de e-mail, exceto Gmail (a capacidade de usar a tag <style> no <head> não é suportada), portanto, é recomendável incluir estilos inline para acomodar 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:#ffffff;
}
</style>
Em Células de Tabela
Você pode aplicar um estilo de fonte-família a todo o texto em uma célula de tabela colocando CSS inline na tag TD do seu HTML. Usar esse método afetará todo o conteúdo daquela célula de tabela, independentemente da quantidade.
Em Texto com <span>
Dentro do seu conteúdo, é importante poder controlar o estilo de uma palavra específica ou seção de texto. Usando <span>, você pode aplicar um atributo de estilo a uma única palavra ou grupo de palavras.
Font Stacks
Você pode declarar qualquer fonte que desejar em um e-mail. Se o destinatário tiver a fonte instalada, o e-mail será exibido como esperado. No entanto, se o destinatário não tiver a fonte disponível, uma fonte padrão será usada em seu lugar. Felizmente, você pode priorizar uma lista de fontes de substituição para exibir sempre que a fonte original não estiver disponível.
<span style="font-family:'Architects Daughter',cursive,'Verdana','Helvetica';">Olá mundo!</span>
Fontes Personalizadas
Se houver fontes que você absolutamente precisa usar, pode usar o método @import em seu CSS. No entanto, há algumas limitações ao usar @import, pois não é suportado em todos os clientes de e-mail. A maioria dos clientes de e-mail baseados na web, como Gmail, Outlook.com e Aol.com, não permite. No entanto, é suportado por dispositivos iOS, Apple Mail e Thunderbird. O Outlook em si tem suporte limitado para @import e, em alguns casos, dependendo da versão, pode não suportá-lo de forma alguma.
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Architects+Daughter);