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

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.

addCF.png

 

A form will be displayed to you.

CF_form.png

 

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

 

CF_form2.png

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.

CF_stack.png

 

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.

CF_form_edit.png

 

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.

Screen_Shot_2018-03-15_at_16.15.58.png

A confirmation message will be displayed to minimize the chances of accidental deletion.

confirm.png

 

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.

Screen_Shot_2018-03-15_at_15.18.19.png

 

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

mceclip0.png

... and Muli Black 900:

mceclip1.png

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.

Font Name Font stack
Arial Arial, 'Helvetica Neue', Helvetica, sans-serif
Courier 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace
Georgia Georgia, Times, 'Times New Roman', serif
Helvetica 'Helvetica Neue', Helvetica, Arial, sans-serif
Lucida Sans 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif
Tahoma Tahoma, Verdana, Segoe, sans-serif
Times New Roman TimesNewRoman, 'Times New Roman', Times, Beskerville, Georgia, serif
Trebuchet MS 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif
Verdana Verdana, Geneva, sans-serif
ヒラギノ角ゴ Pro W3 ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,Osaka, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif
メイリオ メイリオ, Meiryo, MS Pゴシック, MS PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,Osaka, sans-serif
Abril Fatface 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif
Bitter 'Bitter', Georgia, Times, 'Times New Roman', serif
Cabin 'Cabin', Arial, 'Helvetica Neue', Helvetica, sans-serif
Droid Serif 'Droid Serif', Georgia, Times, 'Times New Roman', serif
Lato 'Lato', Tahoma, Verdana, Segoe, sans-serif
Open Sans 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
Roboto 'Roboto', Tahoma, Verdana, Segoe, sans-serif
Source Sans Pro 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif
Merriwheater 'Merriwheater', 'Georgia', serif
Montserrat 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif
Nunito 'Nunito', Arial, 'Helvetica Neue', Helvetica, sans-serif
Oswald 'Oswald', Arial, 'Helvetica Neue', Helvetica, sans-serif
Oxygen 'Oxygen', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif
Permanent Marker 'Permanent Marker', Impact, Charcoal, sans-serif
Roboto Slab 'Roboto Slab', Arial, 'Helvetica Neue', Helvetica, sans-serif
Ubuntu 'Ubuntu', Tahoma, Verdana, Segoe, sans-serif
Alegreya 'Alegreya', 'Trebuchet MS', Helvetica, sans-serif
Arvo 'Arvo', 'Courier New', Courier, monospace
Catamaran 'Catamaran', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
Chivo 'Chivo', Arial, Helvetica, sans-serif
Cormorant Garamond 'Cormorant Garamond', 'Times New Roman', Times, serif
Dosis 'Dosis', Arial, Helvetica, sans-serif
Fira Sans 'Fira Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
Lora 'Lora', Georgia, serif
Monda 'Monda', 'Courier New', Courier, monospace
Noto Sans 'Noto Sans', 'Trebuchet MS', Helvetica, sans-serif
Noto Serif 'Noto Serif', Georgia, serif
Playfair Display 'Playfair Display', Georgia, serif
Poppins 'Poppins', Arial, Helvetica, sans-serif
Quattrocento 'Quattrocento', 'Trebuchet MS', Helvetica, sans-serif
Quattrocento Sans 'Quattrocento Sans', Georgia, serif
Questrial 'Questrial', 'Trebuchet MS', Helvetica, sans-serif
Raleway 'Raleway', 'Trebuchet MS', Helvetica, sans-serif
Rubik 'Rubik', 'Trebuchet MS', Helvetica, sans-serif
Ruda 'Ruda', 'Courier New', Courier, monospace
Shrikhand 'Shrikhand', Impact, Charcoal, sans-serif
Sintony 'Sintony', 'Courier New', Courier, monospace
Varela Round 'Varela Round', 'Trebuchet MS', Helvetica, sans-serif
Work Sans 'Work Sans', 'Trebuchet MS', Helvetica, sans-serif
Have more questions? Submit a request

Comments