Available in all BEE Pro paid plans.
Why use a custom font (web fonts)
There are times when you may need to use a font that is not available among the fonts provided by default in your BEE Pro account. For example, you may need to follow strict branding guidelines in your company, or begin working with a client that uses a specific font for their email communication. Or you may just wish to experiment with new font styles!
To add custom fonts to the editor, BEE Pro allows you to add new fonts to your BEE Pro account, leveraging fonts that are available through the Web, called Web fonts.
Let's dive in.
- Which email clients support Web fonts
- Adding a custom font
- Editing a custom font
- Deleting a custom font
- Using Google fonts
- Using Adobe fonts
- Limitations with font weights (variations)
Which email clients support Web fonts
Unfortunately not all email clients support Web fonts. In general, they are supported by:
- iOS Mail
- Apple Mail
- Android (default mail client, not Gmail app)
- Outlook 2000
- Outlook.com app
- Thunderbird
Campaign Monitor created an in-depth guide to using Web fonts in email, if you want to learn more about this topic, and Litmus has a detailed guide as well.
As you can see from the list above, there are a couple of very popular email clients missing from the list. Specifically...
Gmail limitation
Gmail does not support Web fonts, including Google fonts (strange, indeed!). However, Gmail does natively support some fonts that are not your typical Web-safe fonts: Google Sans and Roboto.
Outlook limitation
Please note that Outlook 2007/2010/2013/2016 is not compatible with any custom or web fonts (it will not retrieve a font from the Web): it only supports traditional web-safe fonts, and only displays other fonts if they are physically installed on the computer. Use the font stack to define which font the message should fall back to (see below).
Adding a custom font
Log into your BEE Pro account and navigate to Settings > Brand style. You can add a custom font by clicking on the corresponding button located on the top-right of the Brand fonts section.
A form will be displayed to you.
Form inputs:
Font name
This is the font name that will be displayed in the editor. It usually matches the font name, but you can use the name of the brand that requested the font, or whatever makes things easier for you.
CSS URL
The address of the CSS document used to embed the font files and the CSS rules that apply them.
This URL must be delivered on the https protocol, with a valid SSL certificate. Also, Policy cors must be enabled in the host to deliver the font files.
It's a best practice to use a dedicated CSS sheet, because if the CSS contained additional styles, those styles may be inherited by the application and cause problems in the BEE Pro user interface.
Google fonts already provide web-fonts that correctly work in the editor and most email clients. See below for more about how to easily use Google fonts with BEE pro.
Font Stack
This is the font-family stack (CSS syntax) that will be applied to the text paragraphs.
Check that there is a correspondence with the style applied in your CSS style-sheet.
We recommend building a font stack with some fall-back choices. Remember that Gmail and other email clients will not display web-fonts, so remember to add a web-safe font or a general font family style (serif, sans-serif or monospace).
Example:
Font name: Lobster
CSS URL: https://fonts.googleapis.com/css?family=Lobster
Font Stack: 'Lobster', Georgia, Times, serif
Once you Add font, the new, custom font will be added at the bottom in the Custom fonts section. To be easily identifiable, they are displayed using a dark card style.
Editing a custom font
You can edit a custom font by clicking on the font card. The font settings form opens, and you will be able to update the CSS URL or font stack.
For technical reasons, the name cannot be edited. if you need to update the name, we recommend to add a new font item with the correct values and then delete the existing one.
Deleting a custom font
To delete an existing Custom font move the mouse cursor over the ✔ mark. The icon will change to a 𝙓 indicating the delete action.
A confirmation message will be displayed to minimize the chances of accidental deletion.
Using Google fonts
Google fonts provide a rich catalog of web-fonts free of charge and ready to use. So they are a very popular choice when looking to use additional fonts, assuming that you are not restricted by specific brand constraints.
Using a Google font with BEE Pro is very simple. Just copy and paste the content provided by Google to add the font CSS URL and font stack. Don't worry about formatting: just copy and paste the values above in the form, and they will automatically be updated to fit the needed format.
Using Adobe fonts
If you wish to use Adobe fonts inside BEE Pro, go to fonts.adobe.com (the old Typekit). On this website, you can find the font library and all the font selections.
In order to use the Adobe font you prefer, search the font you would like to use, then make sure to enable it by clicking on active.
Once you enable it, click on the [</>] icon to get the css as follows:
Copy and past these data in the form (see above).
Limitations with font variations (styles)
Unfortunately you may not use variations (styles) of the same font family.
For example, let's assume that you wanted to use these two Google fonts:
Muli 400
... and Muli Black 900:
In BEE Pro you add the first variation of Muli under Custom Fonts, and then the second one. Unfortunately, they will look the same.
Why? Because you cannot load two Custom Fonts from the same font family, which in this case is:
font-family: 'Muli', sans-serif;
In other words, if you selected two pieces of text in the BEE editor, and used the two Custom Fonts to style them, they would look the same, and they will both be styled as the first one you added to the system (Muli 400 in this case).
You can use variations. For example, you can use Muli Black 900. You just cannot use two variations of the same font, unfortunately (so you cannot at the same time use Muli 400 and Muli Black 900).
Comments