Using Custom Fonts in the Email Builder

When creating your own HTML Email Design System, you may want to use a custom font beyond the standard ones available. When working with brand guidelines where you need to use a custom font, it's always best to use a custom font with a solid fallback in place.

Email client support

The first consideration to take into account when working with custom fonts is that email client support is patchy. The following email clients support custom fonts:

• Apple Mail

• iOS Mail

• Samsung Mail

• Outlook.com

It's important to define a font-stack when using custom fonts. This should include some standard system fonts to make sure that your email renders for clients that don't support custom fonts.

Example: 'OpenSansBold', Helvetica, Arial, sans-serif

To host your custom fonts, you can either use a service such as Google Fonts, or host them yourself.

For situations where your custom fonts aren't supported, you should select fallbacks that are included on the majority of computers. These fallbacks define what fonts will be displayed if the email client doesn't support custom fonts. Here is a website for fallback fonts:

https://www.cssfontstack.com/

CSS set up for Emails

Please Note: You may need to reach out to a developer for assistance if you don’t have the expertise.

The most reliable way to include a specific font in your email is to use @font-face. Below is an example of this in action: 

<style> @font-face { font-family: 'Festive', cursive; src: url('https://fonts.googleapis.com/c...') }

* { font-family: 'Festive', cursive; }

</style>

When you are within the email builder you would add custom CSS on the Appearance tab

When you are using the email builder in a workflow you can add custom code as well. See the screenshot below:

Please Note: When working with Outlook, you need to wrap this @font-face in a @media tag. This is because Outlook 2007, 2010, and 2017 don't support them.

Please Note: If you want to use the custom font in the builder you can copy the custom font code and make a custom value for it and use the custom value.