Back to main menu

Improve Your Email Design

Set up fallback email safe fonts

There are two different types of fonts available to email designers for their emails: web safe fonts and web fonts. For web safe fonts, think of examples like Arial, Times New Roman, Verdana, or Georgia. They’re the default fonts found across the majority of different operating systems and devices. Web fonts aren’t found as part of the default fonts available on various devices and operating systems. A couple of web fonts you may be familiar with are Open Sans and Roboto.

Banners_design_fallback_web_safe_fonts

Even though web fonts open up a variety of different design opportunities for web designers, email marketers need to proceed with caution because, unfortunately, not all email clients support web fonts. This is why, when using web fonts, it’s essential to have a fallback web safe font in place for email clients that don’t support web fonts. Think of this as a prioritized list of preferred fonts. If a client can’t comply with your number one choice, it will fall back to the next one on your list. 

How to get fallback web safe fonts in place

Make sure to use an Email Service Provider (ESP) that offers the possibility to code your emails and set up your fallback fonts:

  • For example, if you want to use Roboto in your email campaign: when a recipient opens your campaign in an email client that doesn’t support web fonts, a different font will be used instead of Roboto, such as Arial. 

  • If you’re coding your emails, you can select your own fallback fonts to best maintain the design you want. Otherwise, if you don’t set up any fallbacks, the email client will render the email marketing in its default font (Arial in our example). 

  • As an example, if you want to set your email up to have Helvetica as its fallback instead of Arial, you can use the following code in your CSS: font-family: "Roboto", Helvetica, Arial, sans-serif;

Result

Setting up fallback fonts when using web fonts will allow you to ensure your email rendering is close to what you want, even if your first choice isn’t available.

Difficulty

Advanced

Pro Tip

In 2018, Gmail released an updated interface for their webmail client using two popular web fonts: Google Sans and Roboto. So, despite Gmail not supporting web fonts, if you use either of these web fonts in your emails, they will actually render in Gmail.

You might also like

email-components

Design

Create a library of email components

Learn More

email-accessibility

Design

Get email accessibility right

Learn More

responsive-email-templates

Click rates

Use responsive email templates

Learn More

Want to know more about how you can apply these email growth tactics to your business? 

CTA icon