Fontes da Web: como fazer com que funcionem perfeitamente no e-mail

Publicados: 2021-04-24

Do meu estudo bastante científico (observei minha filha enquanto ela começava a escrever relatórios no ano passado), aprendi que um dos primeiros aspectos do design com o qual as pessoas começam a brincar é a tipografia. Quando você começa a escrever relatórios, passa horas tentando descobrir a melhor fonte a ser usada. Ok, talvez não horas, mas a maioria das pessoas gasta um pouco de tempo nisso. Porque, como as grandes marcas sabem, a tipografia é importante. E isso importa no e-mail.

Mas a acessibilidade também é importante. Portanto, pare de prender sua mensagem em imagens e comece a usar texto ao vivo com fontes seguras para a web e fontes da web. Afinal, textos que não dependem de imagens e podem ser lidos por um público mais amplo proporcionam uma ótima experiência para o assinante. E como seus melhores clientes - o e-mail retorna $ 36 para cada $ 1 investido - isso é ótimo para sua estratégia de marketing geral.

Nesta postagem do blog, vou detalhar:

Fontes da web x fontes seguras da web
Os benefícios das fontes da web
Suporte e licenciamento ao cliente por e-mail
Onde encontrar fontes da web
Codificando-os em e-mails
Ótimos exemplos de fontes da web em e-mail

Fontes da web x fontes seguras da web

Existem duas maneiras diferentes de fazer texto ao vivo: fontes seguras para a web e fontes da web. Embora tenham o mesmo som, existem diferenças definidas. Para entender essas diferenças, vamos dar uma olhada em como as fontes funcionam em seus e-mails.

Quando seu e-mail é codificado, a fonte é declarada usando uma propriedade CSS chamada font-family. Esta propriedade da família de fontes pode ter apenas um nome de fonte ou vários nomes de fonte - geralmente chamados de pilha de fontes. A inclusão de vários nomes de fontes garante que, se uma fonte não funcionar, haja um substituto ou fonte de backup de sua escolha. Sem listar vários nomes de fontes, o cliente de e-mail pode decidir sua fonte de backup. Quando seus assinantes abrem seu e-mail, o navegador lê a propriedade font-family e puxa a fonte a ser usada.

Fontes seguras da web

Com as fontes seguras para a web, o navegador extrai a fonte do diretório de fontes local. Isso significa que são fontes que já estão instaladas em seu computador. Todos os computadores vêm com fontes pré-instaladas e são consideradas seguras para a web. Eles são seguros de usar, porque há uma boa chance seu subscritor já vai tê-los também.

A desvantagem é que há um número limitado de fontes seguras da web em comparação com as fontes da web. E eles são usados com bastante frequência, então é menos provável que você se destaque (se é isso que você deseja).

As fontes seguras para a web óbvias são:

Arial
helvética
Verdana
Georgia
Times New Roman

Mas existem vários outros por aí que você pode usar com um certo grau de confiança. Portanto, saia do loop de fontes Arial ou Helvetica padrão e encontre uma fonte segura para a web que funcione para sua marca.

O melhor recurso que encontrei para fontes seguras na web é CSS Fonts. Adoro que eles incluam uma porcentagem de uso para PCs e Macs para cada fonte, para que você saiba aproximadamente quantos de seus assinantes podem ver a fonte desejada e quantos verão seu substituto.

Fontes da web

As fontes da Web são obtidas de um servidor - seja você mesmo hospedado ou externo (como Google ou Adobe). Por causa disso, a variedade de fontes que podem ser usadas é muito maior e podem ser usadas em qualquer computador ... desde que o navegador ou cliente de e-mail possa puxar a fonte. Em alguns casos, seu assinante pode já ter uma web fonte baixada e instalada em sua máquina, então essas fontes funcionarão mesmo em clientes de e-mail que não suportam fontes da web!

Portanto, embora as fontes da web ofereçam muito mais variedade e liberdade criativa, elas têm um custo: suporte limitado ao cliente de e-mail (no qual me aprofundarei mais adiante).

Por que fontes da web?

Então você pode se perguntar, por que se preocupar com as fontes da web? Como profissional de marketing e designer, você conhece a pressão para manter a marca no e-mail com cores, design e, sim, tipografia. As fontes da Web permitem que você exiba sua marca sem depender de imagens para o seu texto.

Bloquear 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 “ocultar” texto em imagens limita a acessibilidade do e-mail porque os leitores de tela não podem ler o texto na imagem.

Exemplo de email Ace Hardware de fontes da web com e sem imagens — Email com e sem imagens ao usar uma fonte da web

Exemplo de e-mail do Magic Spoon de fontes da web com e sem imagens — Email com e sem imagens ao usar texto em imagens

E, ter texto em suas imagens prejudica a experiência do assinante, se as imagens estiverem desativadas por padrão. Isso pode não ser uma grande parte dos seus assinantes, mas realmente não há como saber se alguém desligou as imagens e abriu o seu e-mail. Então, por que não fornecer a melhor experiência para o maior público possível?

As fontes da Web abrem novos caminhos de criatividade em tipografia, permitindo que designers de e-mail sejam criativos e acessíveis - e mantenham a aparência e o estilo de sua marca.

Posso usar fontes da web no e-mail?

Se você ainda não adivinhou, a resposta é sim! Mas - como em todas as coisas do e-mail - existem ressalvas.

Suporte ao cliente por e-mail

As fontes da Web funcionam apenas em alguns clientes de e-mail e deve-se tomar cuidado para garantir que, onde não são suportadas, a fonte retroceda normalmente.

Cliente de email	Suporte a fontes da web
Apple Mail	✓ sim
Outlook 2007-2016	✘ Não
Outlook 2019	✘ Não *
Outlook para Mac	✓ sim
Outlook Office 365	✘ Não *
App Gmail	✘ Não *
iOS	✓ sim
App Outlook	✘ Não
Samsung Mail	✘ Não *
AOL Mail	✘ Não
Gmail	✘ Não *
Office 365	✘ Não
Outlook.com	✘ Não
Yahoo! Correspondência	✘ Não

* Apresenta alguns resultados duvidosos, dependendo do método de incorporação de e-mail, discutido posteriormente.

Vale a pena dar uma olhada em sua base de assinantes para ver quantos estão visualizando seus e-mails em um cliente de e-mail compatível com fontes da web. Se um número suficiente de assinantes for, é uma ótima maneira de dar um toque adicional ao seu e-mail.

Se a maioria não for, simplesmente não valerá a pena seu tempo e esforço, especialmente se você estiver pensando em usar uma fonte da web paga.

Quais clientes de e-mail seus assinantes usam?

Descubra onde seus assinantes abrem seus e-mails e como eles se envolvem - com Litmus Email Analytics. Obtenha os insights de que você precisa para otimizar seus e-mails e muito mais.

Saiba mais →

Licenciamento

As fontes da Web foram originalmente projetadas para serem usadas exclusivamente em sites, portanto, seu licenciamento normalmente é para uso apenas em sites e aplicativos móveis. O motivo pelo qual muitos serviços de fontes da web não permitiam o uso em e-mail é porque ele é visto como uma distribuição da fonte, o que vai contra muitos dos serviços de contrato de licença de usuário final (EULA).

Todos os provedores de fontes da Web que contatamos ofereceram suporte usando suas fontes por e-mail. Cada provedor tinha uma licença diferente que era exigida, portanto, não há uma maneira padrão de as fontes serem licenciadas por e-mail. Se você deseja usar uma fonte, entre em contato com a empresa para descobrir exatamente como ela licencia suas fontes.

Onde encontrar fontes da web

Então você pensou em tudo e decidiu que deseja dar uma chance às fontes da web. Com opções aparentemente infinitas, você pode encontrar aquelas que se encaixam na sua marca. Mas também é importante ter em mente a acessibilidade.

Algumas fontes são mais fáceis de ler do que outras.

Fontes ornamentadas ou decorativas, como fontes de exibição ou manuscritas, podem tornar difícil para pessoas com deficiência visual ou dislexia distinguir entre os formatos das letras. Fontes sem serifa (fontes sem recursos estendidos ou curvas em suas letras, como Arial, Calibri, Century Gothic ou Helvetica) e fontes slab (fontes com linhas mais grossas, como Museo Slab e Rockwell) são consideradas mais acessíveis.

Aqui estão alguns bons lugares para começar a procurar.

Fontes do Google

Existem muitos serviços de fontes da web disponíveis, mas o Google Fonts é o nosso favorito. O serviço é totalmente gratuito, e você pode baixar as fontes da web para o seu computador se estiver fazendo mock ups no Adobe Photoshop, Sketch ou outro software de design.

Fontes Adobe

O Typekit se tornou Adobe Fonts em outubro de 2018. Eles agora suportam os métodos <link> e @import para usar fontes como fontes da web (mais sobre isso a seguir). O serviço não é totalmente gratuito, mas se você já tiver alguma assinatura da Creative Cloud, ela está incluída.

Serviços de fontes da web

Existem vários outros serviços de fontes da Web disponíveis mediante pagamento. Você precisará certificar-se de obter a licença correta para usá-los em seu e-mail.

Tipo de rede (licença da Web)
Fundição de Tipo de Processo (Licença Web)
Optimo (Licença de Anúncios Digitais)
Fontspring (licença de e-mail personalizada)
Typotheque (Licença Web)
Tipo de produção (licença de publicidade online)
MyFonts (licença da Web)
Tipo Comercial (Licença Web)

Com as licenças da web, pode haver a opção de hospedar a fonte por conta própria ou ter a fonte hospedada pelo fornecedor. Em algumas licenças da web, você paga por uma determinada quantidade de visualizações de página com cada e-mail que carrega a fonte contando como visualização de página, portanto, certifique-se de levar isso em consideração ao comprar uma licença.

Como incorporar fontes da web em e-mails

Como as fontes da web normalmente não são encontradas no dispositivo local de alguém e, em vez disso, são hospedadas em outro lugar, você deve “incorporar” ou importar a fonte da web em seus e-mails antes de poder realmente usá-los.

1. Obtenha o URL do seu arquivo de fonte

Você precisará do URL da sua fonte da web para chamá-la para seu e-mail. Seu serviço de fonte da web deve ter este URL. Mas se você mesmo estiver hospedando o arquivo de fonte, obtenha a URL de onde a fonte da web fica em seu servidor. Certifique-se de que é um URL público e não proveniente de um servidor local. Caso contrário, seus assinantes não conseguirão acessar a fonte da web e, em vez disso, verão uma fonte substituta.

Se você estiver usando o Google Fonts, encontrar o URL é um pouco complicado, mas não muito difícil. Descubra como na próxima etapa do método de incorporação @ font-face.

2. Importe a fonte da web usando um dos três métodos

Existem três métodos para incorporar fontes da web em e-mail (e uma ressalva que pode limitar o método que você pode usar). Os três métodos para incorporar sua fonte são:

<link>
@importar
@Tipo de letra

Então, por que você escolheria um método em vez de outro?

O método @import adia o carregamento da fonte da web que está sendo importada até que o HTML no qual está incorporado seja totalmente carregado. Isso pode fazer com que a fonte da web demore um pouco mais para aparecer no e-mail, enquanto o restante do e-mail é carregado. Por outro lado, o método <link> carrega o recurso embutido conforme o código do arquivo HTML é lido (de cima para baixo), o que pode atrasar o carregamento de seu e-mail se o arquivo de fonte da web for particularmente grande.

Outra coisa a ter em mente ao escolher um método a ser usado é o que seu ESP suporta.

Você pode fazer um código bonito que funcione no Litmus o dia todo, mas se seu ESP alterar seu código, como sabemos que a maioria deles faz, nada do que você fizer importará. Certifique-se de que o ESP não altere o código de uma forma que faça com que as fontes parem de funcionar. No Litmus, nosso ESP não nos permite incluir condicionais MSO em torno de elementos de estilo. Portanto, os métodos <link> e @import não funcionam para nós, pois não são bem suportados no Outlook, que discutiremos mais adiante.

Usando <link>

Usar o método <link> é relativamente simples para incorporar fontes em seu e-mail. Coloque esta linha de código no <head> do seu e-mail, próximo ao topo:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Usando @import

O método @import também é um método relativamente simples. Coloque esta linha de código no <head> do seu e-mail, entre as tags <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Usando @ font-face

Os serviços de fontes da web online geralmente oferecem cinco formatos de arquivo à sua escolha: .eot, .woff, .woff2, .svg e .ttf. Os formatos .woff e .woff2 têm o melhor suporte quando se trata de e-mail, então sugerimos usar um ou ambos os formatos quando possível. O método @ font-face é o único método que permite escolher especificamente o formato de arquivo que deseja importar, tornando-o o método mais à prova de balas para implementar fontes da web.

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

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Se você estiver usando o Google Fonts, encontrar o código @ font-face não é a coisa mais fácil, mas não é muito difícil.

Primeiro, você deve encontrar a fonte que gostaria de usar no Google Font. Em seguida, escolha o estilo que deseja usar. Um menu flutuante aparecerá à direita.

googe_fonts

No flyout, haverá uma opção para <link> ou @import. Ambos terão um URL (destacado na imagem acima). Você pode copiar esse URL e colá-lo na barra de endereço do seu navegador para encontrar a folha de estilo CSS que o Google usa.

google_font_api

Copie e cole a versão 'latina' de @ font-face entre suas tags <style>.

No Litmus, o método @ font-face é nossa implementação de referência para importar fontes da web em nossos e-mails.

Todo o crédito por esse método de importação de fontes da web vai para o defensor da acessibilidade de e-mail, Paul Airy, conforme detalhado em um boletim Type: E anterior.

3. Escolha a fonte alternativa certa

Ao usar fontes da web, é necessário ter uma fonte segura da web substituta para os clientes de e-mail que não oferecem suporte a fontes da web.

Cada cliente de e-mail possui uma fonte padrão se a fonte listada na pilha de famílias de fontes não estiver disponível. Por exemplo, o Gmail usa Arial, o Apple Mail usa Helvetica e o Outlook usa Times New Roman. Se você não gosta do som de nenhuma dessas fontes padrão, temos boas notícias - você pode escolher sua fonte substituta ao codificar na pilha de famílias de fontes (na próxima etapa).

Escolher a fonte alternativa certa que mantém o design do seu e-mail é a chave para oferecer uma ótima experiência para todos os seus assinantes, não importa qual cliente de e-mail eles estejam usando.

As fontes substitutas devem ser do mesmo tipo da fonte da web - use uma fonte substituta sans-serif se sua fonte for uma fonte sans-serif e uma fonte substituta serif se sua fonte da web também for 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. O ideal é escolher uma fonte substituta que tenha altura x semelhante para evitar que o design do seu e-mail desmorone quando a fonte substituta estiver em uso.

exemplo de altura x comparando verdana, arial e proxima nova

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

4. Use suas fontes no e-mail

Depois que sua fonte da web for importada e seus substitutos escolhidos, usá-los por e-mail é tão fácil quanto usar uma fonte segura da web. Basta usar o nome da família de fontes definido no método de importação seguido por sua (s) fonte (s) substituta (s) no CSS inline ou no cabeçalho:

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

Pense nisso como uma lista priorizada de fontes preferidas. Se um cliente de e-mail não puder cumprir sua escolha número um, ele voltará para o próximo em sua lista.

Por exemplo, usando a pilha de famílias de fontes acima, o Gmail irá ignorar a primeira fonte na lista, pois é uma fonte da web que não é compatível com o Gmail. Portanto, a fonte renderizada será Verdana. Se Verdana não for compatível com o dispositivo usado (o que seria muito raro, já que Verdana é uma fonte segura para a web), o dispositivo usaria a fonte sans-serif padrão para seu sistema, pois esta é a terceira fonte na lista.

5. Evite negrito falso ou itálico falso

Se você tiver versões em negrito e itálico de seus arquivos de fonte da web, vamos usá-los!

Os designers de fontes se empenharam e se esforçaram para obter todos os estilos diferentes de uma fonte corretos , por isso é uma prática recomendada aplicar o design de tipo original em vez de permitir que o cliente de e-mail ou navegador aplique aleatoriamente um negrito ou itálico falso a fonte regular.

Basicamente, NÃO faça isso:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Como o design da web, você pode obter as fontes genuínas incluindo esses estilos em sua pilha @ font-face, como:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Como você pode ver, os diferentes estilos obtêm fontes diferentes, independentemente da família de fontes. Desta forma, se você estilizar sua fonte no HTML desta forma:

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

… Então ele puxará a fonte genuína 'Roboto-BoldItalic' ! Da mesma forma, apenas adicionando a espessura da fonte: negrito; irá puxar em 'Roboto-Bold' e apenas adicionando estilo de fonte: itálico; irá puxar em 'Roboto-Italic' .

NÃO faça isso também!

Portanto, você deve estar se perguntando: por que fazer dessa forma em vez de declarar uma família de fontes diferente para cada estilo, o que também traz as fontes genuínas? É assim que parece:

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

Isso representa um problema. Usar nomes de família de fontes para armazenar estilos não apenas cria CSS excessivamente complicado e redundante, mas também elimina o estilo do seu texto se seus substitutos entrarem em ação. Por exemplo, se você estiver visualizando o código acima no Gmail (que não t suporte para fontes da web personalizadas), então você verá apenas Verdana sem negrito e sem itálico em vez de Roboto Bold Itálico .

Mantendo sua família de fontes e seus pesos de fonte ou estilos de fonte separados, suas fontes substitutas ainda manterão o estilo correto.

6. Use uma correção para o Outlook

O Outlook tem uma peculiaridade maravilhosa que você deve observar. Especialmente se for o que muitos de seus assinantes usam.

Veja a aparência de seus e-mails no Outlook e muito mais

Todo cliente de e-mail tem suas peculiaridades. Felizmente, você pode vê-los em seus e-mails antes de enviar - com as visualizações de e-mail Litmus. Não há mais e-mails quebrados.

Aprenda como →

Se você usar o método <link> ou @import, tudo antes do Outlook 2019 exibirá Times New Roman, independentemente de quais alternativas você colocou para sua fonte.

A solução mais simples para isso é usar o método @ font-face. Mas se você precisar usar o método <link> ou @import, use as condicionais do Microsoft Office (MSO) para comentar essa seção de seus estilos. Isso impedirá que o Outlook as veja e usará suas fontes substitutas conforme pretendido:

Sem condicionais MSO	Com condicionais MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Mas espere um minuto. Acabei de dizer tudo antes do Outlook 2019. Então, o que acontece no Outlook 2019 (e no Outlook Office 365)? Bem, nesses clientes de e-mail, o Outlook volta ao seu fallback, mesmo sem as condicionais MSO.

Sem condicionais MSO	Com condicionais MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Na verdade, nesses clientes, o @import parece realmente funcionar! Mas é mesmo? Nós tentamos com outras fontes e os resultados foram parecidos com o que você esperaria do Outlook:

testando fontes da web no Outlook

Parece que às vezes ele coloca uma fonte do sistema em vez das fontes que você especificar. E no caso de Montserrat, não tenho certeza do que está acontecendo lá, mas não é Montserrat. Na verdade, parece mais com Lato. Parece que o Outlook está tentando oferecer suporte a fontes da web, mas ainda não chegou lá. É definitivamente algo para ficar de olho no futuro.

Enquanto isso, pelos motivos acima - e porque você não pode direcionar apenas o Outlook 2019 - é melhor usar @ font-face ou ocultar suas declarações <link> ou @import.

Se você achar que o Outlook está convertendo sua fonte para Times New Roman, você pode adicionar mso-font-alt: 'Arial'; ao bloco @ font-face para fornecer um substituto alternativo para o Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Outra solução que você pode usar é codificar a família de fontes com a pilha de fontes seguras da web embutida e incluir um bloco <style> para substituir as fontes pela fonte da web. Então é só uma questão de esconder esse bloco de estilo do Outlook:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Use uma correção para o Gmail também (brincadeira, não existe uma)

Então você deve estar se perguntando: “E quanto ao Gmail? Afinal, estamos usando o Google Fonts. ”

Você pensaria que, como o Gmail é um produto do Google e o Google Fonts é um produto do Google, eles funcionariam bem juntos. Mas, infelizmente, não é esse o caso.

As fontes da web não funcionam no Gmail, mesmo que sejam uma fonte do Google e mesmo que você use o código fornecido pelo Google. A única exceção para isso é Roboto:

Usando diferentes fontes do Google	Usando diferentes métodos de incorporação

E, de fato, no aplicativo Gmail Mail no Android, todas as fontes sans-serif voltam para Roboto:

Usando diferentes fontes do Google	Usando diferentes métodos de incorporação

Alguma inspiração para você começar

Certo, agora quem está pronto para ver alguns exemplos incríveis de marcas usando fontes da web em e-mail da maneira certa?

Ace Hardware usava fontes da web onde são suportadas, mas escolheu Rockwell como uma fonte slab substituta para garantir que o e-mail ainda fosse exibido na marca em outros clientes de e-mail.

Com fontes da web	Com substitutos

O Webflow usa fontes do sistema como um substituto para suas fontes da web e usa espessuras de fonte para garantir uma ótima experiência tipográfica, independentemente da fonte que apareça.

email de fluxo da web

Mantenha a marca e livre de erros

As fontes da Web são uma ótima maneira de manter o texto dos seus e-mails com marca e acessível. Mas, como você pode ver neste post, há muitas nuances a serem consideradas. É por isso que é igualmente importante ...

Esteja sempre testando!

Fizemos o nosso melhor para testar várias circunstâncias diferentes, mas seu ESP pode distorcer seu código de uma maneira inesperada. Certifique-se de testar seus e-mails antes de enviá-los para ter certeza de que todos os seus substitutos estão funcionando corretamente.

Teste o controle de qualidade das fontes da web em seus e-mails

Você fez isso certo? Descubra com uma avaliação gratuita do Litmus. Visualize a aparência de seus e-mails em mais de 90 clientes de e-mail, aplicativos e dispositivos. E mantenha a reputação da sua marca com e-mails perfeitos.

Comece sua avaliação gratuita do Litmus →

Adicionar fontes da web vale a pena como um grande aprimoramento progressivo para ajudá-lo a fornecer a melhor experiência para seus assinantes em suas caixas de entrada. Divirta-se! E deixe-nos saber se você tiver alguma dúvida ou comentário abaixo.

Publicado originalmente em 11 de abril de 2019, por Jaina Mistry. Última atualização em 23 de abril de 2021.