15 novembro 2022

Como Adicionar e Usar Fontes Personalizadas com a Stripo

Olena Zinkovska
Olena Zinkovska Blog editor
Índice
  1. Os conjuntos de fontes que a Stripo oferece
  2. Como adicionar uma fonte personalizada às configurações do seu projeto com a Stripo:
  3. Como adicionar fontes personalizadas que não são do Google às configurações do seu projeto com a Stripo
  4. Como usar fontes personalizadas em e-mails
  5. Ao escolher uma nova fonte para e-mails, lembre-se:
  6. Finalizando
1.
Os conjuntos de fontes que a Stripo oferece

Em 26 de novembro de 2018, lançamos uma nova opção – agora, com a Stripo, você pode adicionar fontes personalizadas a projetos em apenas alguns cliques sem precisar ter habilidades em HTML. Por que isso é importante?

Não é segredo que uma boa copy complementa o design do e-mail e convence os clientes a fazerem uma compra.

Normalmente, fontes personalizadas são usadas para tornar o copy do texto consistente com a marca e atraente. E ao envolvê-lo em uma fonte que melhor corresponda à situação e ao design do e-mail, você torna sua copy perceptível e bonita. Assim, muitas vezes, as fontes seguras para a Web não são suficientes.

Exemplo de Banner de Fontes Personalizadas _ Stripo

Nesse caso, você precisará lidar com fontes personalizadas.

Assista a um pequeno vídeo que explica como adicionar fontes personalizadas com a Stripo. Por favor, se atente ao fato de que esse recurso está disponível apenas para planos pagos.

Como adicionar fontes personalizadas com a Stripo

A maioria dos ESPs e construtores de e-mail oferece apenas fontes seguras para a Web, enquanto a Stripo oferece quatro conjuntos delas:

Os conjuntos de fontes que a Stripo oferece

A Stripo oferece quatro conjuntos de fontes para seus e-mails:

1. Fontes padrão/seguras para a Web

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, e Verdana são as fontes mais populares, pois são amplamente utilizadas por sites e são exibidas corretamente pela maioria dos clientes de e-mail.

Fontes personalizadas Arial _ Stripo

2. Fontes não padrão

Essas são as fontes que alguns profissionais ainda discutem se são seguras na web ou não. Mas elas são comumente usadas ​​na web. Por exemplo, o Playfair Display é apresentado em quase 1,1 bilhão de sites, populares principalmente nos EUA e na Europa Ocidental.

Fontes Personalizadas Display Fair _ Stripo

Observação: você sabia que pode diminuir o número de fontes padrão e não padrão para seus projetos se achar algumas em excesso?

Como remover fontes desnecessárias da lista:

  • vá até as configurações do projeto em sua conta;
  • encontre a guia de fontes padrão/não padrão;
  • clique no botão alternar para remover a fonte da sua lista.

3. Fontes de Banner

Elas são decorativas e podem ser aplicadas apenas em banners, pois qualquer texto que você colocar sobre os banners será considerado um elemento de imagem. Consequentemente, ela será exibida corretamente em todos os dispositivos, independentemente da fonte que você aplicar.

A Stripo oferece mais de 40 deles.

Exemplo de Fonte de Banner de Fontes Personalizadas _ Stripo

Você vê a lista dessas fontes apenas ao trabalhar com uma legenda sobre banners.

4. Fontes personalizadas

Com a Stripo, você pode adicionar absolutamente qualquer fonte que desejar.

Não há limites para o número de fontes personalizadas a serem adicionadas.

Depois de instalar novas fontes, aplique-as ao menu e aos textos — a todas as cópias em e-mails, exceto banners.

Como adicionar uma fonte personalizada às configurações do seu projeto com a Stripo:

Mais uma vez, quero enfatizar que este é um processo muito simples, pois você não precisa fazer nenhuma alteração no código HTML do e-mail. Outra ótima notícia é que você não precisa definir as mesmas novas fontes para cada modelo de e-mail com o qual trabalha — você as define para projetos inteiros. Elas estão disponíveis em sua lista em todas as suas campanhas nesses projetos.

Passo 1. Google

Primeiro, você precisa encontrar a fonte que mais gosta. Adorei as Great Vibes que encontrei no Google Fonts. Além de mais de 1.000 fontes, o Google também oferece combinações populares com elas.

  • então, você precisa selecionar a fonte, rolar para baixo até a seção "Estilos" e clicar no sinal de "mais";

Fontes Personalizadas do Google _ Stripo

  • em seguida, clique no ícone “Visualizar famílias selecionadas” no canto superior direito da página;

Visualizar Famílias Selecionadas no Google Fonts

  • em uma janela pop-up, copie o link — ele está destacado na captura de tela abaixo.

Fontes Personalizadas Stripo _ Incorporando Seu Link

Passo 2. Stripo

Para instalá-lo em sua conta com a Stripo, você precisa:

  • clicar no nome da conta no canto superior direito da tela;
  • selecionar “Configurações da organização”;

Adicionando Uma Fonte Personalizada à sua Conta da Stripo

  • à esquerda, você verá “Projetos” — clique na guia;

Fontes Personalizadas Stripo _ Seus Projetos

  • selecione o projeto que você vai embelezar com uma nova fonte (eu tenho apenas uma);
  • clique no botão “Configurações”;

Fontes Personalizadas _ Configurações do Projeto na Conta Stripo

  • role para baixo para ver a seção “Gerenciamento de fontes”;
  • clique no botão “Adicionar fonte personalizada” (já tenho três fontes personalizadas);

Fontes Personalizadas Stripo _ Clique Para Adicionar Sua Fonte Personalizada

  • no formulário pop-up, nomeie a fonte, insira o link do URL incorporado e insira a família de fontes especificada pelo Google;

Conectando Sua Fonte Personalizada

Observação: para sua conveniência, recomendamos dar nomes reais às fontes enviadas.

  • depois de preencher todos os campos corretamente, clique em "Conectar”.

Você encontrará as novas fontes na lista suspensa ao editar seu e-mail.

Como adicionar fontes personalizadas que não são do Google às configurações do seu projeto com a Stripo

Se você não conseguiu encontrar a opção perfeita no Google Fonts, não se preocupe! Você pode adicionar qualquer fonte personalizada à sua conta Stripo fazendo upload de um link para essa fonte.

Você também pode usar suas próprias fontes personalizadas:

  • carregue os arquivos de fonte para o armazenamento em nuvem aberto ou em uma plataforma de compartilhamento de arquivos;
  • verifique se os arquivos estão disponíveis para visualização para que os usuários possam vê-los;
  • adicione o cabeçalho Acessar-Controlar-Permitir-Origem aos seus arquivos de fonte para evitar que sejam bloqueados pelo navegador;
  • adicione os links à sua conta Stripo da maneira descrita acima. Certifique-se de que seus links comecem com “https” e não estejam entre aspas.

Aqui está um exemplo de como adicionar uma fonte personalizada à sua conta Stripo com o Adobe Fonts:

  • vá para o Adobe Fonts;
  • escolha a fonte que você gosta e aperte o botão </>;

Escolha Sua Fonte Personalizada no Adobe Fonts

  • insira o nome do seu projeto;
  • escolha os pesos e estilos das fontes;
  • clique no botão “Criar”;

Adobe Fonts _ Adicionar Uma Fonte a Um Projeto da Web

  • copie o link;

 Adobe Fonts _ Copie o Link

  • siga os mesmos passos descritos acima para adicionar essa fonte à sua conta Stripo.

Observação: se você quiser usar fontes do Adobe Fonts, não poderá fazer isso sem uma assinatura da Creative Cloud.

Ativando fontes no Adobe Fonts

Como usar fontes personalizadas em e-mails

Você está apto para aplicar qualquer fonte que desejar a blocos de texto e menus para tornar seus e-mails vívidos e únicos. Mas certifique-se de testá-los quanto à compatibilidade com os principais clientes de e-mail.

Observação: se um cliente de e-mail não tiver suporte para a fonte que você escolheu, o cliente a substituirá por uma padrão (a maioria dos clientes de e-mail possui duas fontes padrão).

Não só a Stripo recomenda fortemente que você teste e-mails/fontes com Email on Acid ou Litmus, mas também envie este e-mail para todos os seus endereços de e-mail para ver como sua fonte se parece na realidade.

Para o meu teste, escolhi a fonte Alumni Sans. Nossa ferramenta de teste de e-mail mostrou que a maioria dos dispositivos e clientes de e-mail substituiriam essa fonte pelas padrão. Nas capturas de tela abaixo, você pode ver que o Apple Mail exibiu a fonte Alumni Sans corretamente, enquanto o Outlook 2019 a substituiu por sua fonte padrão.

Testando Fontes Personalizadas em Vários Clientes de E-mail

Clientes de e-mail que suportam fontes personalizadas em e-mails

Existem apenas alguns deles:

  • Apple Mail (fonte padrão — Helvetica);
  • Apple iPhone (fonte padrão — Helvetica);
  • Thunderbird (fonte padrão — Impact);
  • Aplicativo Outlook para Android, iOS e Mac (fonte padrão — Calibri);
  • Aplicativo de e-mail nativo do Android (fonte padrão — Roboto).

Observação: você não pode ter certeza se sua fonte personalizada é suportada por esses clientes de e-mail, por isso, é crucial testar sua mensagem antes de enviá-la.

Ao escolher uma nova fonte para e-mails, lembre-se:

  1. Apenas alguns clientes de e-mail suportam fontes personalizadas.
  2. A fonte Sans-serif facilitam a percepção e são mais apropriadas para textos formais e boletins informativos para negócios.
  3. Leva mais tempo para ler um texto escrito em serif para pessoas com deficiência visual e dislexia, mas funciona melhor para e-mails promocionais.
  4. Para e-mails HTML, 14 px é o melhor tamanho de fonte, mas para dispositivos móveis, é 16 px.
  5. Para tornar seus e-mails acessíveis, evite fundos brancos e textos alinhados ao centro.
  6. Na sua conta Stripo, você pode adicionar novas fontes e remover as que não usa para projetos específicos.

Finalizando

Fontes personalizadas podem ser uma ferramenta incrível para tornar seus e-mails profissionais e reconhecíveis, mas é vital testar suas mensagens antes de enviá-las. Adicione fontes decorativas à sua conta e use-as para incrementar seus modelos de boletins informativos de e-mail.

Embeleze seus e-mails com fontes personalizadas
Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
8 comentários
Dave Myron há 3 anos
Can you update this article to include using non-Google custom fonts?
Hanna Kuznietsova há 3 anos
Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.
Reinhard Jung há 3 anos
Hey, thanx a lot!
Hanna Kuznietsova há 3 anos
Reinhard, Thanks for your supportive feedback. We're glad you liked it :)
Arsen Malashchuk há 4 anos
А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?
Hanna Kuznietsova há 4 anos
Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.
Евгения Землянская há 3 anos
а если есть только файл со шрифтом? Его никак не загрузить?
Hanna Kuznietsova há 3 anos
Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.
Tipo
Indústria
Estações
Integração