Using custom fonts in BEE Pro

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)
• List of default fonts in BEE Pro

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...

Adding a Custom Font

Log into your BEE Pro account and navigate to Settings > Brand styles. 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.

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 it's important to add a web-safe font or a general font-family style (serif, sans-serif, or monospace).

Once you click 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 adding 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.

In order to use a Google Font in BEE Pro, start by copying just the HREF content from the widget. You can see an example of this below. 

For the font stack information, copy the font-family information. Be sure to exclude "font-family:" from your copied text. See below for an example of the necessary information.

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 paste the necessary information from this form into BEE Pro. Make sure to only include the HREF as well as the font stack (sans "font family:") so that your font works appropriately. See the Google Fonts walkthrough above for clarification. 

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).

List of default fonts in BEE Pro

Here's a list of the default fonts that you have available in your BEE Pro account, with the corresponding font stack.