Working with custom fonts in BEE Pro

Available in BEE Pro with the Team plan and above

 

Why use a custom font

There are times when you may need to use a font that is not available among the fonts provided 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!

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

Edit 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

Delete 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

Important

If you need to add a variation of an existing font (e.g., you want to use a specific font-weight of the font Lato), it's important that you disable existing fonts with the same name or CSS rules.

Have more questions? Submit a request

Comments