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.

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;

Spaceship

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.

Mailjet by Pathwire logo

“While web fonts offer many design opportunities, specialists must be careful because, unfortunately, not all email clients support them”. That is why, when using web fonts, you must set up a list of back-up fonts called fallback fonts.”

François Sahli

Graphic Designer

Final-Score

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

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