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:
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.
Google Fonts is a library of free, open-source fonts provided by Google that can be downloaded to be used in your different digital projects. Google fonts are supported by the following email clients:
|
|
Brevo allows you to use your own fonts in the email editor to design emails with your brand identity, ensuring consistency and brand recognition across all your communication channels.
To use a custom font in the Brevo email editor, you can either:
Browse and select a font from a public website font library such as Google or Adobe Fonts API. Once you've selected a font, copy the link to the font's CSS file. This link contains the font's styles and variations and it should be similar to:
https://fonts.googleapis.com/css2?family=Your+Font+Name:ital,wght@0,100;1,200&display=swap
or
https://use.typekit.net/xxxxxxx.css
@font-face
rule. To use a custom font from a CSS file:
- Upload the file containing your custom font into one of your server directories. Custom font files are typically in a .woff, .woff2, or .ttf format.
Ensure it is accessible from a direct URL such ashttps://yourserver.com/fonts/your-custom-font.woff2
. - Create a CSS file using the
@font-face
rule and add the link to your custom font file from above in url. For example:@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;
} - Upload the CSS file to one of your server directories.
- Based on your domain and CSS file location, retrieve the URL to your CSS file.
For example, if your domain is thegreenyoga.com, your CSS file is located in the css directory, and the CSS file is named thegreenyoga-font, your CSS file URL should be:https://thegreenyoga.com/css/thegreenyoga-font.css
Once you've copied the link to the CSS file containing your custom font, follow the ➕ Add a custom font procedure below. The link should be in a http:// format.
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:
- From the email editor, click Style in the left sidebar and expand Text Appearance.
- 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 ⬇️.
- 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.
➕ Add a custom font- From the Add fonts page, click the Custom font tab and click + Add custom font.
- 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?. - 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.
- Click Add to list.
- From the Custom font tab, select the custom font you've just added to save it in your fonts list.
- 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.
- Click Add selected fonts.
🎉 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.
✍️ Edit or delete a font
To edit the fonts you have added:
- From the email editor, click Style in the left sidebar and expand Text Appearance.
- Scroll down in the Text appearance settings and click + Add web fonts.
- You are redirected to the Add fonts page. From there you can edit or delete your fonts:
Deselect the Google fonts you do not want to have in your font selection drop-down lists anymore.
- Deselect the custom fonts you do not want to have in your font selection drop-down lists anymore.
- Click the Edit icon to edit the link or name of your custom font.
- Click the Bin icon to permanently delete the custom font from the email editor.
From the drop-down lists, select another font to replace the fallback font you originally selected. - 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.