Add Google, custom, and fallback fonts to your email design

Font selection helps convey your brand identity and improve the readability of your emails. Brevo allows you to choose between a range of font options to help you create beautiful emails that resonate with your audience and enhance your brand recognition.

❓ Which fonts can be used for my email design?

When designing your email, you can use:

Safe or fallback fonts Google fonts Custom fonts

A web safe font is a font that is likely to be available on the vast majority of users' devices. Safe fonts can be used as fallback fonts if the fonts originally selected are not supported by your recipient's device. By choosing safe fonts as your fallback fonts, you can prevent the risk of font rendering issues and guarantee that your emails maintain their impact regardless of the device on which they are read.

💡 Good to know
Imported Google and custom fonts may not be supported by all email clients, browsers or systems. We recommend that you set up fallback fonts to replace unsupported Google and custom fonts on some devices. 

Before you start

Set up your Brand Library so that every new template you select will inherit your brand properties, such as logo, colors, fonts, and social media links. To learn more, check our dedicated article Automatically design your emails with your brand's assets using the Brand Library.

🔤 Add fonts to the email editor

When designing your email, safe fonts are displayed by default in the font selection drop-down lists. However, you can add and mix all font types (Google, Safe, and custom fonts). You can also set up fallback fonts to be used for your headings and paragraphs if the fonts you originally selected are not supported by your recipients' device. 

To add and set up fonts: 

  1. From the email editor, click Style in the left sidebar and expand Text Appearance.
  2. In the Paragraph and Headings drop-down, you can select Safe fonts that are available by default. However, you can add Google or Custom fonts by clicking + Add web fonts ⬇️.
    2022-03-16_15-12-30__1_.gif
  3. You are redirected to the Add fonts page. You can either:
    🖱️ Select Google fonts

    Select the font(s) you want to use from the existing list or enter a font name to search for it in the Google Fonts library and select it.
    email_google-fonts_en-us.jpg

    ➕ Add a custom font
    1. From the Add fonts page, click the Custom font tab and click + Add custom font
    2. In the Web font link field, insert the URL of the font.
      To learn more on how to retrieve the URL of your font, check information from the Custom font tab in Which fonts can be used for my email design?.
    3. In the Font family drop-down, choose the name you want to use for your font. We automatically display the names defined in the CSS file where the font is saved.
    4. Click Add to list
      email_custom_font_en-us.jpg
    5. From the Custom font tab, select the custom font you've just added to save it in your fonts list.
      email_select-custom-font_en-us.jpg
  4. Optional: By default, your fallback fonts will be Arial. To edit them, scroll down the Add web fonts page to access the Fallback for all web fonts section. Select the fallback font(s) you would like to use for your headings and other texts in case your recipients' email client does not support the Google or custom fonts you originally selected.
  5. Click Add selected fonts.
    email_fallback-font_en-us.jpg

🎉 You can now select the font(s) you added from any font selection drop-down lists in the email editor and apply it to any text in your email. 

email_brand-library_custom-font_en-us.gif

✍️ Edit or delete a font

To edit the fonts you have added: 

  1. From the email editor, click Style in the left sidebar and expand Text Appearance.
  2. Scroll down in the Text appearance settings and click + Add web fonts. 2022-03-16_15-12-30__1_.gif
  3. You are redirected to the Add fonts page. From there you can edit or delete your fonts:
    Google font Custom font Fallback fonts
    Deselect the Google fonts you do not want to have in your font selection drop-down lists anymore.
  4. Click Add selected fonts

⏭️ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

💬 Was this article helpful?

16 out of 68 found this helpful