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 already available in BEE Pro. For example, you may need to follow strict branding guidelines in your company. Or perhaps you are working with a client that uses a specific font for their email communication. Maybe you just want to experiment with new font styles!

BEE Pro allows you to add custom fonts to your BEE Pro account. Note that you can only leverage 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, web fonts work in:

• iOS Mail
• Apple Mail
• Android (default mail client, not Gmail app)
• Outlook 2000
• Outlook.com app
• Thunderbird

Campaign Monitor has an in-depth guide to using Web fonts in email if you want to learn more about this topic. 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. Scroll down until you see the Brand fonts section. You can add a custom font by clicking the button that displays with a + icon.

A form will open.

Form inputs

Font name

This is the font name that will display in the editor. It usually matches the font name, but you can customize this in any way you would like.

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. If the CSS contains additional styles, the host application is likely to inherit them. This can cause problems in the BEE Pro user interface.

Google fonts already provide web fonts that 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 stylesheet.

We recommend building a font stack with some fall-back choices. Remember that Gmail and other email clients will not display web-fonts. 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. This section is always at the top of your font settings. 

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, you will not be able to change the font name. If you need to update this, we recommend adding a new font and then deleting 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 display to reduce the chances of accidental deletion.

Using Google Fonts

Google fonts provide a rich catalog of web fonts free of charge and ready to use. 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:" as well as the semicolon (;) from your copied text. Your font may not work correctly if this information is included in your font stack. 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.

Once you've located your preferred font, activate it.

Once enabled, 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 (e.g. remove "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;

For example, say you selected two different pieces of text in the BEE editor. If you used the two variations of your custom font to style them, they would look exactly the same. Both will appear as the first one you added to the system (Muli 400 in this case).

You can use variations individually. You just cannot use two variations of the same font at the same time.

Note that, if you are self-hosting your fonts, you can work around this by giving each variation of your font a unique font-family name. Just keep in mind that self-hosting fonts is not within our scope of support. 

List of default fonts in BEE Pro

Here's a list of the default fonts that you have available in your BEE Pro account. This list also includes the corresponding font stacks we've built:

Back to top