A seleção de fontes ajuda a transmitir a identidade de sua marca e a melhorar a legibilidade de seus e-mails. A Brevo permite que você escolha entre uma variedade de opções de fontes para ajudá-lo a criar e-mails bonitos que repercutam no seu público e aumentem o reconhecimento da sua marca.
Quais fontes podem ser usadas no design do meu e-mail?
Ao projetar seu e-mail, você pode usar:
Uma fonte segura da Web é uma fonte que provavelmente estará disponível na grande maioria dos dispositivos dos usuários. Fontes seguras podem ser usadas como fontes de reserva caso as fontes selecionadas originalmente não sejam compatíveis com o dispositivo do destinatário. Ao escolher fontes seguras como fontes de reserva, é possível evitar o risco de problemas de renderização de fontes e garantir que seus e-mails mantenham o impacto, independentemente do dispositivo em que forem lidos.
O Google Fonts é uma biblioteca de fontes gratuitas e de código aberto fornecida pelo Google que pode ser baixada para ser usada em seus diferentes projetos digitais. As fontes do Google são compatíveis com os seguintes clientes de e-mail:
|
|
A Brevo permite que você use suas próprias fontes no editor de e-mail para criar e-mails com a identidade da sua marca, garantindo a consistência e o reconhecimento da marca em todos os seus canais de comunicação.
Para usar uma fonte personalizada no editor de e-mail da Brevo, você pode:
Procure e selecione uma fonte em uma biblioteca de fontes de um site público, como a API das fontes do Google ou do Adobe. Depois de selecionar uma fonte, copie o link para o arquivo CSS da fonte. Esse link contém os estilos e as variações da fonte e deve ser semelhante a:
https://fonts.googleapis.com/css2?family=Your+Font+Name:ital,wght@0,100;1,200&display=swap ou
https://use.typekit.net/xxxxxxx.css
@font-face. Para usar uma fonte personalizada de um arquivo CSS:
- Carregue o arquivo contendo a fonte personalizada em um dos diretórios do servidor. Os arquivos de fontes personalizadas geralmente estão em formato .woff, .woff2, ou .ttf .
Certifique-se de que ele seja acessível a partir de um URL direto, comohttps://yourserver.com/fonts/your-custom-font.woff2. - Crie um arquivo CSS usando a regra
@font-facee adicione o link para o arquivo de fonte personalizada acima em url. Por exemplo:@font-face {
font-family: 'Your Custom Font';
src: url('https://yourserver.com/fonts/your-custom-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
} - Carregue o arquivo CSS em um dos diretórios do servidor.
- Com base no seu domínio e no local do arquivo CSS, recupere o URL do seu arquivo CSS.
Por exemplo, se o seu domínio for thegreenyoga.com, o seu arquivo CSS estiver localizado no diretório css e o nome do arquivo CSS for thegreenyoga-font, o URL do arquivo CSS deve ser:https://thegreenyoga.com/css/thegreenyoga-font.css
Depois de copiar o link para o arquivo CSS contendo a fonte personalizada, siga o procedimento ➕ Add a custom font (Adicionar uma fonte personalizada) abaixo. O link deve estar em um formato http://.
Antes de começar
Configure sua Biblioteca de marcas para que cada novo modelo selecionado herde as propriedades de sua marca, como logotipo, cores, fontes e links de mídia social. Para saber mais, consulte nosso artigo dedicado Crie automaticamente seus e-mails com os ativos de sua marca usando a Biblioteca de marcas.
🔤 Adicionar fontes ao editor de e-mail
Ao projetar seu e-mail, as fontes seguras são exibidas por padrão nas listas suspensas de seleção de fontes. No entanto, você pode adicionar e misturar todos os tipos de fontes (Google, Safe e fontes personalizadas). Você também pode configurar fontes de reserva para serem usadas nos cabeçalhos e parágrafos se as fontes selecionadas originalmente não forem compatíveis com o dispositivo dos destinatários.
Para adicionar e configurar fontes:
- No editor de e-mail, clique em Style (Estilo) na barra lateral esquerda e expanda Text Appearance (Aparência do texto).
- No menu suspenso Paragraph and Headings (Parágrafo e cabeçalhos), você pode selecionar fontes seguras que estão disponíveis por padrão. No entanto, você pode adicionar fontes do Google ou personalizadas clicando em + Add web fonts (Adicionar fontes da Web) ⬇️.
- Você é redirecionado para a página Add fonts (Adicionar fontes). Você também pode:
🖱️ Selecionar as fontes do Google
Selecione a(s) fonte(s) que deseja usar na lista existente ou digite o nome da fonte para procurá-la na biblioteca do Google Fonts e selecione-a.
➕ Adicionar uma fonte personalizada- Na página Add fonts (Adicionar fontes), clique na guia Custom font (Fonte personalizada) e clique em + Add custom font (Adicionar fonte personalizada).
- No campo Web font link (Link da fonte da Web), insira o URL da fonte.Para saber mais sobre como recuperar o URL da sua fonte, verifique as informações na guia Custom font (Fonte personalizada) em Quais fontes podem ser usadas no design do meu e-mail?.
- No menu suspenso Font family (Família de fontes), escolha o nome que você deseja usar para a fonte. Exibimos automaticamente os nomes definidos no arquivo CSS em que a fonte está salva.
- Clique em Add to list (Adicionar à lista).
- Na guia Fonte personalizada (Custom font), selecione a fonte personalizada que acabou de adicionar para salvá-la na lista de fontes.
- Opcional: por padrão, suas fontes de reserva serão Arial. Para editá-las, role para baixo na página Add web fonts (Adicionar fontes da Web) para acessar a seção Fallback for all web fonts (Reserva para todas as fontes da Web). Selecione a(s) fonte(s) de reserva que gostaria de usar para os cabeçalhos e outros textos, caso o cliente de e-mail dos destinatários não seja compatível com as fontes do Google ou personalizadas que você selecionou originalmente.
- Clique em Add selected fonts (Adicionar fontes selecionadas).
🎉 Agora, você pode selecionar a(s) fonte(s) que adicionou em qualquer lista suspensa de seleção de fontes no editor de e-mail e aplicá-la(s) a qualquer texto do e-mail.
✍️ Editar ou excluir uma fonte
Para editar as fontes que você adicionou:
- No editor de e-mail, clique em Style (Estilo) na barra lateral esquerda e expanda Text Appearance (Aparência do texto).
- Role para baixo nas configurações de Text appearance (Aparência do texto) e clique em + Add web fonts (Adicionar fontes da Web) .
- Você é redirecionado para a página Add fonts (Adicionar fontes). A partir daí, você pode editar ou excluir suas fontes:
Desmarque as fontes do Google que você não deseja mais ter em suas listas suspensas de seleção de fontes.
- Desmarque as fontes personalizadas que você não deseja mais ter nas listas suspensas de seleção de fontes.
- Clique no ícone Edit (Editar) para editar o link ou o nome da fonte personalizada.
- Clique no ícone de Lixeira para excluir permanentemente a fonte personalizada do editor de e-mail.
Nas listas suspensas, selecione outra fonte para substituir a fonte de reserva que você selecionou originalmente. - Clique em Add selected fonts (Adicionar fontes selecionadas).
⏭️ O que vem a seguir?
- Use blocos de conteúdo (Texto e links, Imagem, Botão etc.).
- Defina o estilo de design para todo o seu e-mail
🤔 Dúvidas?
Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.
Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar o parceiro especialista certificado em Brevo.