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
orhttps://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-facerule 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 an 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 scroll down to the Text styles section.
- In the Paragraph drop-down, select the style for which you want to add a font.
- In the Font drop-down, select the font you want to use from the default ones.
-
If you want to add a custom font, you can add Google or Custom fonts by clicking Manage web fonts. You are redirected to the Manage web fonts page where you can:
🖱️ Select Google fontsFrom the Google Fonts tab, click the Fonts drop-down and 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:
➕ Add a custom font- Go to the Custom font tab.
- In the Custom font link field, paste the URL of the font you want to use.
➡️ 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 name drop-down, we automatically display the names defined in the CSS file where the font is saved.
- Click Add font.
⛑️ Add fallback fontsGo to the Fallback fonts tab and select fallback font(s) you would like to use for your headings and other texts, in case your custom fonts are not supported by your recipients' email client.
🎉 You can now select the font(s) you added from any font selection drop-down lists in the email editor and apply them 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 scroll down to the Text styles section.
-
In the Font drop-down, click Manage web fonts to edit or delete your fonts:
Click the cross icon to remove 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 other fonts to replace the fallback fonts you originally selected.
⏭️ What's next?
- About sections and content blocks
- Configure your email layout and design with the Style tab
- About the Title and Text content blocks
- Drag & Drop email editor section
🤔 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 Agency partner.