Using custom fonts in BEE Pro

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 communication. Maybe you just want to experiment with new font styles!

BEE Pro allows you to add custom fonts to your BEE Pro account. You can use them when designing both emails and pages. 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

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 > Workspace styles. Scroll down until you see the Workspace 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 builder. 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 builder 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. 

Font variations/styles (Updated!)

The release of the Paragraph and List content blocks also made it possible to use variations of custom fonts! However, there are still some limitations associated with this. Specifically, BEE is only programmed to recognize certain font variations:

• Regular (typically a font-weight of 400)
• Bold (typically a font-weight of 700)

This isn't to say you can't use other font weights! (More on this later).

Regular and Bold variations

To use both versions of your custom font, you need to use a stylesheet that includes both font weights.

Let's look at an example. Say you want to create a design with the Google Font, Barlow, but you need to use both the regular and bolded weight. 

Barlow Regular 400

... and Barlow Bold 700:

Start by selecting both of these styles. The Google Fonts sidebar should reflect both variations.

Google will automatically generate a stylesheet that refers to both variations. Adding this custom font to your BEE Pro account remains the same; we'll ask for a Font name, CSS URL, and a font family.

Need an example of what this stylesheet looks like? Check out our Barlow Regular 400/Bold 700 stylesheet

As long as your stylesheet includes a regular and a bold version of your font, you can toggle between these variations when working with text-based content inside the builder.

Other Variations

As mentioned above, you can still use other variations of your custom fonts. However, you need a dedicated stylesheet for that font.

Let's build off the existing example. You're still using Barlow, but you don't need to toggle between the regular and bolded font weights. Instead, maybe you need to use Barlow Medium 500 Italic.

In this case, you'll want to generate a stylesheet dedicated to just that version of your font.

Need an example of what this stylesheet looks like? Check out our Barlow Medium 500 Italic stylesheet

However, in this situation, you would not be able to have two separate versions of Barlow in your BEE Pro account. BEE Pro will always refer to the first stylesheet that was uploaded. 

Why? Because BEE can't differentiate between two custom fonts from the same font family. In this case, the font family for all versions of Barlow is:

font-family: 'Barlow', sans-serif;

The builder only knows how to differentiate between the bold and regular variations. If there are multiple variations, the builder will ignore them. It will only recognize other styles if the stylesheet refers to a single variation.

You can always use regular and bolded variations. For other font styles, you must use variations individually.

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