Using custom fonts in BEE Pro
This article applies to the Team and Enterprise BEE Pro 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 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...
Gmail limitation
Gmail does not support Web fonts, including Google fonts (strange, indeed!). However, Gmail supports a small selection of web 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 only supports traditional web-safe fonts. Sometimes other fonts may display if they are physically installed on the computer. Use the font stack to define which font the design should fall back to (see below).
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.
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. 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).
Example
Font name: Lobster
CSS URL: https://fonts.googleapis.com/css?family=Lobster
Font Stack: 'Lobster', Georgia, Times, serif
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:
| 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 PGothic, sans-serif |
| メイリオ | メイリオ, Meiryo, ＭＳ Ｐゴシック, 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 |
If you have any questions, feel free to contact us.
Comments
0 comments
Please sign in to leave a comment.