Using Web Fonts
This article applies to the Page builder in all BEE Pro plans.
When we first released the BEE builder, only web-safe fonts were available. Starting with the BEE 2.1.2 release, we added some popular web fonts. Since then, we've also added the option to use your own custom web fonts.
Web fonts can add personality to your emails while keeping your design accessible. Unfortunately, not all email clients support them. Review this article to learn more about how web fonts display in different email clients.
What are web-safe fonts?
Most online text editors include the same small set of available fonts. Why a small set, and why only these fonts? Because they are the ones typically installed on your device. These fonts are usually referred to as "web-safe" fonts. Sometimes they are also called "default" or "system" fonts.
All devices come with a selection of fonts provided by the operating system. Over time, other fonts may have been added through applications that you've installed. You may have even manually added fonts to your device!
As you can imagine, the resulting list of installed fonts can vary significantly from one device to another. However, a small subset of fonts is almost always found on any device. These are what we refer to as web-safe fonts:
- "safe" because they are available on pretty much every device.
- "web" because they are used when editing documents online.
You will find these web-safe fonts at the top of any font selection tool in the BEE builder. They are:
- Lucida Sans
- Times New Roman
- Trebuchet MS
With only a handful of web-safe options, this can limit design choices for typography. One solution is to expand the set of available fonts by using web fonts.
When can we use web fonts?
Web fonts are available online, provided by services like Google fonts. Your device downloads them only when needed (so there is no need for you to install them on your computer/device). In this case, the word "web" refers to "created for the web, and distributed online".
Web fonts are here to help us expand our text style choices and go beyond standard web-safe fonts.
While this sounds like the perfect solution for the BEE builder, not all email clients support them. Known email clients such as Outlook (desktop and web), Gmail, and Yahoo! Mail don't support web fonts. Instead, these clients display the text with their default font. They will only show the web font if the physical font file is installed in the recipient's device.
Here's an overview of web font compatibility in some of the most popular email clients:
|Microsoft Outlook for Mac (2011, 2016)||Yes|
|Microsoft Outlook for Windows (2007-2016)||No|
|Gmail (iOS & Android)||No*|
|iOS Mail (iPhone & iPad)||Yes|
|Outlook (iOS & Android)||Yes|
*Gmail (weirdly) does not support most web fonts - but Roboto and Open Sans will work!
Since web font support is inconsistent, we've built font stacks using cascading style sheets. A font stack tells any email program how to fall back to a web-safe font when the preferred font doesn't display. The stacks work as a descendant list of choices: if the first one is not available, it moves to the next.
Font Stacks in BEE
In BEE, fonts are grouped to offer the best possible fallback solution. This ensures that the layout won't break when the selected font is not supported. To build these stacks, we considered font shape and font size.
The following is a simplified list of the available font stacks:
Web font › Web safe fallback list of options
Bitter › Georgia › Times › Times New Roman › serif
Droid Serif › Georgia › Times › Times New Roman › serif
Lato › Tahoma › Verdana › Segoe › sans-serif
Open Sans › Helvetica Neue › Helvetica › Arial › sans-serif
Roboto › Tahoma › Verdana › Segoe › sans-serif
Source Sans Pro › Tahoma › Verdana › Segoe › sans-serif
Montserrat › Trebuchet MS › Lucida Grande › Lucida Sans Unicode › Lucida Sans › sans-serif
Ubuntu › Tahoma › Verdana › Segoe › sans-serif
We included two Japanese fonts in the stacks. Hiragino (ヒラギノ角ゴ Pro W3) is provided with Mac OS, while Meiryo (メイリオ) is distributed with Microsoft latest versions of Windows.
Both stacks are built to cover the most popular configurations:
ヒラギノ角ゴ Pro W3 › Hiragino Kaku Gothic Pro › Osaka › メイリオ › Meiryo › ＭＳ Ｐゴシック › MS PGothic › sans-serif
メイリオ › Meiryo › ＭＳ Ｐゴシック › MS PGothic › ヒラギノ角ゴ Pro W3 › Hiragino Kaku Gothic Pro › Osaka › sans-serif
If you have any questions, feel free to contact us.
What about importing a font at a specific weight? For example, can we have an option for "Open Sans Extra Bold"?
Thanks for this post!
@Drian - I saw we answered this question in your ticket, but I wanted to post the result for other Bee Plugin users. i.e. To use a font weight you need to Url Encode the colon as %3A. For example, here is the link for Open Sans with a weight of 800:
Please sign in to leave a comment.