Using Web Fonts

When we first released the builder, only web-safe fonts were available. 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 builder. They are:

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

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 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:

*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 Beefree

In Beefree, 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

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