timer ~ 8 minutos de leitura
99066 visualizações
15 novembro

Como Adicionar e Usar Fontes Personalizadas com a Stripo

Stripo / Blog / Como Adicionar e Usar Fontes Personalizadas com a Stripo

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

Dave Myron há 2 anos

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova comentou com Dave Myron há 2 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á 2 anos

Hey, thanx a lot!

Hanna Kuznietsova comentou com Reinhard Jung há 2 anos

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk há 3 anos

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova comentou com Arsen Malashchuk há 3 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. Будем рады помочь.

Евгения Землянская comentou com Hanna Kuznietsova há 2 anos

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova comentou com Евгения Землянская há 2 anos

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

Você talvez se interesse por

anterior próximo
banner9
06 junho · 15 minutos de leitura
10 Melhores Construtores de Modelos de E-mail para 2022

Todos os construtores de modelos de e-mail são parecidos? Agora você está confuso sobre qual escolher para suas campanhas de e-mail, não é? Não é à toa, pois são muitos. Iremos separar os construtores mais populares para encontrar seus recursos diferenciados para ajudá-lo a encontrar o melhor construtor de e-mail HTML para suas necessidades atuais. Vou tentar criar um modelo em todos esses editores com os mesmos arquivos de mídia para ver se os construtores diferem. Os melhores construtores de...

Design Marketing Modelos
best-fonts-for-email-cover-image-stripo
24 maio · 18 minutos de leitura
Melhores fontes para E-mail: Dicas e Truques de Uso

Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível. Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail. Desenhe e-mails elegantes com Stripo em pouco tempo com nossos modelos pré-construídos Navegue   Fontes de e-mail HTML: Regras gerais a serem seguidas Existem...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 outubro 2021 · 10 minutos de leitura
16 ótimos exemplos de GIFs animados em e-mails

GIFs em e-mails serão de grande utilidade se você quiser mostrar seu produto, chamar a atenção dos usuários para determinados elementos ou apenas decorar levemente seu texto. Neste artigo, fornecemos alguns dos melhores exemplos de animação gif de e-mail. Exemplos de GIFs animados em e-mails Aqui está um compilado dos melhores exemplos com GIFs em e-mails. Cada GIF cumpre sua missão. 1. Adidas (Fonte: E-mail da Adidas) A Adidas usou animações de e-mail para mostrar quais opções de cores eles...

Design Marketing
08 abril 2021 · 17 minutos de leitura
14 Melhores exemplos de design de assinatura de email

Boas assinaturas de email nos ajudam a construir nosso negócio e a causar uma boa impressão nos clientes. Como este é o último elemento que as pessoas visualizam nos emails, devemos fazer com que nossas assinaturas pessoais sejam criativas e memoráveis. Vamos examinar os melhores exemplos de assinaturas de email e seu uso apropriado em emails e templates de newsletter para emails. Deve-se mencionar que todos os tipos de negócios demandas assinaturas de email profissionais com as informações de contato...

Design Marketing Modelos
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail