Using web fonts in the BEE editor

Starting with the BEE 2.1.2 release we added some popular web fonts to the default set of web-safe fonts. Use them to add personality to your emails while keeping your message clear and readable. At the same time, review this article to be aware of how web fonts display in different email clients.

NOTE: If you are using Beefree SDK - the embeddable version of BEE - you can now configure which fonts are available. 

What are web-safe fonts?

In most online text editors you tend to find 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 are the fonts that are normally referred to as "web-safe" fonts.

See, the set of fonts available on your computer is defined by the fonts that shipped with your operating system, those added by applications you installed, and individual fonts that you've added manually over time.

As you can imagine, the resulting list of installed fonts can vary greatly from device to device. There is a subset of fonts, however, that is considered a common denominator as they are almost always found on any device. Those 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.

In the BEE editor, you will find these web-safe fonts at the top of any font selection tool. They are:

• Arial
• Courier
• Georgia
• Helvetica
• Lucida Sans
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Now, the issue with these fonts is that there is only a handful of options, which limits design choices in terms of 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). The word "web" in this case 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.

This sounds like the perfect solution for the BEE editor, but not all email clients support them, unfortunately. Known email clients such as Outlook (desktop and web), Gmail and Yahoo! Mail don't support web fonts and 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.

Campaign Monitor has a fantastic article that goes deep into the ins and outs of using Web fonts in email. See "All You Need to Know about Web Fonts in Email".

Because of this lack of support we've built font stacks (using cascading style sheets) in the BEE editor that automatically tell any email program how to fall back to a safe font when that email client is not able to render them. 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 together to offer the best possible fallback solution. This ensures that the layout won't break when the selected font is not supported. The variables we considered when building these font stacks were 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

Notice that we've kept an eye on the typography design and didn't add fancier or more complex fonts - such as the Lobster font - that wouldn't have an appropriate fallback font.

If you are using Beefree SDK, you can configure the set of fonts that are available to users of the editor inside your application. See Font management.

Japanese fonts

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