The Ultimate Guide to Web Fonts

Histórico, escolher a fonte certa para o seu e-mail nunca foi muito difícil, considerando o número limitado de fontes seguras para a web para escolher. Mas as coisas mudaram. Mais e mais designers de e-mail estão ampliando os limites e adotando as mesmas técnicas de desenvolvimento que os web designers têm usado durante anos – implementando fontes web em seus e-mails.

Fontes web permitem que os web designers sejam mais criativos com sua tipografia, permitindo-lhes escolher fontes não-padrão em seus designs.

Como geralmente é o caso de romper novos caminhos no design e desenvolvimento de e-mail, os membros da comunidade que pensam no futuro estavam entre os primeiros a trazer essas técnicas para nossas caixas de entrada (e atenção). Devemos um enorme agradecimento ao fantástico guia de fontes web do Campaign Monitor, “A Type of Email,” de Paul Airy e Style Campaign por sua inspiração.

No Ultimate Guide to Web Fonts, vamos investigar os detalhes do que são fontes web e como os designers de e-mail podem implementá-las em seus e-mails.

O que é uma fonte da web?

Existem dois tipos diferentes de fontes disponíveis para os designers de e-mail para seus e-mails – fontes seguras para a web e fontes da web. Aqui está a diferença entre as duas:

Fontes seguras para a web
Pense em Arial, Times New Roman, Verdana, ou Geórgia como principais exemplos de fontes seguras para a web. Elas são as fontes padrão encontradas na maioria dos diferentes sistemas operacionais e dispositivos.

Fontes Web
Fontes Web não são encontradas como parte das fontes padrão disponíveis em vários dispositivos e sistemas operacionais, e são especificamente projetadas e licenciadas para uso em websites. Algumas das fontes web que você pode estar familiarizado são Open Sans e Roboto.

Por que fontes web?

Como comerciante e designer, você sabe a pressão para se manter na marca no e-mail, com cores, design, e sim-tipografia. O bloqueio de cópias importantes em imagens tem sido uma prática padrão no design de e-mail como uma forma de permanecer na marca e ser criativo. Mas “esconder” texto em imagens limita a acessibilidade do e-mail porque os leitores de tela não conseguem ler o texto na imagem.

Fontes web abrem novos caminhos de criatividade em tipografia, permitindo que os designers de e-mail sejam criativos e acessíveis – e se mantenham fiéis ao visual e à sensação de sua marca.

Email e fontes web

Embora as fontes web não tenham suporte universal, aqui estão os clientes de e-mail onde são suportadas:

Aple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App

A lista de clientes de e-mail suportados pode parecer curta, mas a maioria deles está entre os 10 clientes de e-mail mais populares. Isso é algo para se empolgar!

**Dica: Em abril de 2018, o Gmail lançou uma interface atualizada para seu cliente de webmail. Esta nova interface usa duas fontes populares da web: Google Sans e Roboto. O que isso significa? Apesar do Gmail não suportar fontes da web, se você usar qualquer uma dessas fontes nos seus e-mails, elas serão realmente renderizadas no Gmail. Basta adicionar as fontes ao atributo CSS da sua família de fontes se você quiser usá-las no seu e-mail.

Descubra o seu top 10

Quando se trata de marketing por e-mail, é tudo sobre o seu público. Use o Litmus Email Analytics para descobrir quais clientes de e-mail são mais populares entre os seus assinantes. Inscreva-se gratuitamente!

Descubra o seu público →

Como incorporar fontes web no e-mail

Existem três abordagens principais que pode adoptar quando utiliza fontes web nos seus e-mails.

@importar

Utilizar @importar é uma das abordagens mais simples para importar fontes web no e-mail. Coloque a seguinte linha de código no <head> do seu e-mail, geralmente no topo do seu <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

Neste exemplo, o nome da família de fontes importadas é “Montserrat”

Seu serviço de fontes web lhe dará a URL que você precisa. Se você mesmo está hospedando a fonte, você precisará apontar a URL para onde seu arquivo de fonte web está sentado.

Este método é bem suportado pela maioria dos clientes de e-mail acima, e só falta suporte no Android 2.3 (Android Gingerbread)-uma versão antiga do Android que tem uma fatia de mercado muito pequena.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Apenas como o método @import, o seu serviço de fonte web definirá o valor do href. Se você mesmo está hospedando o arquivo da fonte, altere esta URL para apontar para onde a fonte web está no seu servidor. E você vai querer colocar esta linha de código no <head> do seu e-mail, perto do topo.

O método <link> tem um desempenho ligeiramente melhor que o método @import, com suporte de todos os clientes de e-mail acima (hurrah!).

Então por que você escolheria um método em vez de outro? O método @import adia o carregamento da fonte web que está sendo importada até que o HTML em que ela está embutida esteja totalmente carregada. Isso pode fazer com que a fonte web demore um pouco mais para aparecer em seu e-mail, enquanto o resto do e-mail é carregado. Pelo contrário, o método <link> carrega o recurso em linha à medida que o código do arquivo HTML é lido (de cima para baixo), o que pode atrasar o carregamento do seu e-mail se o seu arquivo de fonte web for particularmente grande.

@font-face

Os serviços de fonte web online normalmente oferecem cinco formatos de arquivo para escolher: .eot, .woff, .woff2, .svg, e .ttf. O formato .woff tem o melhor suporte quando se trata de e-mail, por isso sugerimos que utilize este formato quando puder. O método @font-face é o único método que lhe permite escolher especificamente qual formato de arquivo você gostaria de importar, tornando-o o método mais à prova de balas para implementar fontes web.

Aqui está uma típica declaração @font-face para importar uma fonte web para e-mail usando o Google Fonts como nosso serviço de fonte web escolhido:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Felizmente, se você estiver usando o Google Fonts, não é fácil encontrar a URL de uma fonte web – aqui estão alguns hoops que você tem que pular.

1. Procure a fonte web que você gostaria de usar.
Após ter encontrado e selecionado, uma pequena barra preta aparecerá na parte inferior da tela. Ao clicar nela, você verá uma tela como esta:

2. Copie a URL da fonte web (destacada acima) e cole-a na barra de endereço do Safari ou do Internet Explorer.
Estamos usando o Safari ou o Internet Explorer neste método, pois o Google Fonts usa a detecção do navegador para decidir qual tipo de arquivo de fonte é servido. Para este método, queremos usar o tipo de arquivo .woff. Usando o Google Chrome o tipo de arquivo de fonte .woff2 que será servido no navegador, o qual tem suporte limitado. Graças ao Elliot Ross por essa visão extra!

Após a página ter sido carregada, você verá uma declaração CSS na página:

3. Copie esse CSS e cole-o na seção <style> do seu e-mail.
Embora esse método seja considerado o mais à prova de balas, alterações poderiam ser feitas pelo fornecedor do serviço de fontes web para a URL de acesso direto usada para importar a fonte web. Se você optar por usar este método, teste seu e-mail regularmente para garantir que suas fontes web continuem a renderizar ao longo do tempo.

Em Litmus, o método @font-face é nossa implementação de importação de fontes web em nossos e-mails.

Todo o crédito por este método de importação de fontes web vai para o advogado de acessibilidade de e-mail Paul Airy, como detalhado em um tipo passado: E newsletter (que você definitivamente deve assinar, se você ainda não o fez).

Usando fontes web em email

Após a importação da sua fonte web, usá-la em email é tão fácil quanto usar uma fonte web segura, usando o nome da família de fontes definido no método de importação:

font-family: 'Montserrat', sans-serif;

Escolhendo uma fonte fallback

Quando usar fontes web, é necessário ter uma fonte web segura fallback para aqueles clientes de email que não suportam fontes web.

Fontes web seguras padrão

Cada cliente de e-mail tem uma fonte padrão se a fonte listada na pilha font-family não estiver disponível. Por exemplo, o Gmail usa Arial, o Apple Mail usa Helvetica, e o Outlook usa Calibri.

Se você não gosta do som de nenhuma dessas fontes padrão, nós temos algumas boas notícias – você pode escolher sua fonte fallback na pilha font-family.

font-family: 'Montserrat', Verdana, sans-serif;

Pense nisto como uma lista prioritária de fontes preferidas. Se um cliente não conseguir cumprir com sua escolha número um, ele voltará para a próxima na sua lista.

Por exemplo, usando a pilha de fontes acima, o Gmail ignorará a primeira fonte da lista, pois é uma fonte web que não é suportada no Gmail, e a fonte apresentada no e-mail será Verdana. Se Verdana não for suportada no dispositivo usado (o que seria muito raro, já que Verdana é uma fonte segura para a web), o dispositivo usará a fonte padrão sans-serif para seu sistema, já que esta é a terceira fonte da lista.

Como escolher a fonte fallback correcta

Se escolher a fonte fallback correcta que mantém o design do seu e-mail é fundamental para proporcionar uma grande experiência a todos os seus subscritores, independentemente do cliente de e-mail que estejam a utilizar.

Fallback fontes devem ser do mesmo tipo que a fonte web – use uma fonte sans-serif fallback se a sua fonte web for uma fonte sans-serif, e uma fonte serif fallback se a sua fonte web for também uma fonte serif. Usar o mesmo estilo de fonte ajudará a manter o design do seu e-mail em diferentes clientes de e-mail. Você pode dar um passo adiante analisando a altura x das fontes.

A altura x é a altura vertical da fonte. Idealmente, você deve escolher uma fonte fallback que tenha uma altura x similar para evitar que o design do seu email se desfaça quando a fonte fallback estiver em uso.

Aqui está um exemplo das diferenças sutis na altura x entre as fontes Verdana, Arial, e Proxima Nova da web. Essas diferenças sutis podem fazer toda a diferença em fazer ou quebrar o seu design de e-mail quando as fontes web não estão renderizando.

CSS Font Stack tem uma lista completa – incluindo a cobertura do sistema operacional – de fontes web seguras que podem ser usadas como fontes fallback.

Anular Faux Bold / Faux Italic

Se você tiver acompanhando versões em negrito e itálico dos seus arquivos de fontes web, então vamos usá-las! Designers de fontes têm pensado e se esforçado muito para obter todos os estilos diferentes de uma fonte correta, então é a melhor prática aplicar o tipo de fonte original ao invés de permitir que o cliente de e-mail ou navegador aplique de forma aleatória uma fonte em negrito ou itálico falso à fonte normal.

Basicamente, NÃO faça isto:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Como o web design, você pode puxar as fontes genuínas incluindo estes estilos na sua pilha @font-face, como assim:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Como você pode ver, os diferentes estilos puxam em fontes diferentes independentemente da font-family. Desta forma, se você estilizar sua fonte no HTML assim:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…então ela puxará a fonte genuína ‘Montserrat-BoldItalic’! Da mesma forma, basta adicionar o peso da fonte: negrito; vai puxar ‘Montserrat-Bold’ e apenas adicionar o estilo da fonte: itálico; vai puxar ‘Montserrat-Italic’.

Então, você pode estar se perguntando – por que fazer desta forma ao invés de declarar uma família de fontes diferente para cada estilo, o que também puxa as fontes genuínas? Isto é o que parece:

NÃO faça isto, também!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Isto apresenta um problema. Usar nomes de famílias de fontes para armazenar estilos não só cria CSS excessivamente complicados e redundantes, como também tira o seu texto de estilo se as suas fallbacks começarem a aparecer. Então, por exemplo – se você estiver vendo o código acima no Gmail (que não suporta fontes web personalizadas), então você só estará vendo Verdana sem negrito, semitalicização em vez de Montserrat Bold Italic. Ao manter sua família de fontes e seus pesos/fontes separados, suas fontes fallback ainda manterão o estilo correto.

Outlook, what are you doing to me!

With Times New Roman as the default fallback font, Outlook tem sido tradicionalmente um desafio para comerciantes de e-mail com um coração para tipografia. Enquanto o Outlook 2019 – a versão mais recente da Microsoft do seu cliente de e-mail desktop – honras fontes fallback especificadas no código, versões mais antigas do Outlook ainda são um desafio.

Se você estiver usando o método de importação @font-face, o Outlook 2007/10/13/16 será padrão para Times New Roman, não importa qual fonte fallback você tenha no lugar. A boa notícia é que há um hack bem testado que resolve este problema.

O seguinte CSS tem como alvo o Outlook, como denotado por <!-> e <!->, e diz ao Outlook para usar uma font-stack diferente.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Utilize a classe “fallback-font” no seu email onde quer que você defina a sua família de fontes:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

E as suas fontes no Outlook 2007/10/13 irão fallback graciosamente para o Arial, em vez de Times New Roman.

Outra solução para este bug é envolver o código de importação @font-face numa consulta multimédia, escondendo-o do Outlook:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook irá agora simplesmente ignorar “Montserrat” na sua pilha de fontes-font-family e ler a próxima fonte.

Existe também o método de apontar a propriedade específica do Microsoft Office, mso-font-alt, com a fonte do sistema escolhida para o seu bloco de declaração @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Isso informará o Outlook para o MS Office como padrão para sua fonte fallback atribuída.

Onde encontrar fontes da web

Google Fonts

Existem muitos serviços de fontes da web disponíveis, mas as fontes do Google são as nossas favoritas. O serviço é totalmente gratuito, e você pode baixar as fontes da web para o seu computador se você estiver zombando de designs no Adobe Photoshop, Sketch, ou outro software de design.

Typekit by Adobe

O serviço popular de assinatura de fontes da Adobe tem sido de pouca utilidade para designers de e-mail no passado, pois o Typekit confiava no JavaScript para incorporar as fontes. A partir de agosto de 2017, o Typekit permitiu o uso de fontes web usando apenas CSS – não requer JavaScript – e que abre fontes web encontradas no Typekit para uso em email. Você pode encontrar instruções detalhadas de como adicionar fontes web Typekit aos seus e-mails usando @import na documentação de ajuda do Typekit.

Mais Serviços de Fontes Web

Se você está procurando por ainda mais websites que oferecem fontes web licenciadas para uso em email (na maioria das vezes com base em pagamento), confira alguns dos serviços abaixo:

MinhasFontes
Tipo Comercial
Font Spring
Font Shop
Você trabalha para eles
Village
Fundição Tipo de Processo

Licenciamento de fontes web em e-mail

Fontes web foram originalmente concebidas para serem utilizadas apenas em websites, portanto o seu licenciamento é normalmente para uso apenas em websites e aplicações móveis. A razão pela qual muitos serviços de fonte web não permitem o uso em e-mail é porque é visto como distribuição da fonte, o que vai contra muitos do Contrato de Licença de Usuário Final dos serviços (EULA).

Os fornecedores de fonte web na lista acima incluem licenças de uso de fonte web em e-mail. Entretanto, muitas licenças são cobradas sobre o número de aberturas mensais, que devem ser consideradas ao utilizar um serviço de fonte web pago.

Posso utilizar fontes web?

Não há absolutamente nenhum mal em utilizar fontes web como uma melhoria progressiva nos seus e-mails neste momento. Implemente suas fontes de retorno corretamente e empurre seus e-mails para o futuro!

Vale a pena dar uma olhada na sua base de assinantes para ver quantos estão visualizando seus e-mails em um cliente de e-mail que suporta fontes da Web. Se a maioria não o for, simplesmente não valeria a pena seu tempo e esforço, especialmente se você estiver considerando usar uma fonte web paga.

Fontes web feitas corretamente

Para lhe dar um pouco de inspiração no que é possível, aqui estão alguns de nossos e-mails favoritos com fontes web.

Ver e-mail completo

Não se esqueça de testar

Como o uso de fontes web no e-mail ainda é considerado ligeiramente experimental, recomendamos que você teste frequentemente, especialmente se você implantou fontes web em templates que podem não ser atualizados regularmente. As alterações e atualizações das capacidades de renderização dos clientes de e-mail normalmente não são anunciadas de antemão e podem acontecer esporadicamente, por isso é melhor testar regularmente.

Vale a pena notar que se você tiver a fonte web instalada no seu próprio computador, você será capaz de ver a fonte web ao testar ao vivo em um cliente de e-mail no seu computador – algo a ter em mente caso de repente pareça que o Gmail está agora suportando fontes web.

TESTE TIPOGRAFIA EM SUAS CAMPANHAS

Inspirado para levar o seu jogo do tipo para o próximo nível? Apenas certifique-se de testar suas campanhas antes de enviá-las. Experimenta Litmus grátis e certifica-te que a tua tipografia fica fantástica em mais de 90 clientes de email, incluindo desktop, webmail e dispositivos móveis.

Aprende mais →