Using custom fonts in the Email Builder

Using custom fonts in the Email Builder

            Modified on: Fri,16 Sep, 2022 at   9:27 PM

 


 

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 in clients which don’t support custom fonts.

 

‘OpenSansBold’, Helvetica, Arial, sans-serif

To host your custom fonts, you can either use a service such as Google Fonts, or host them yourself. We can also host them for our customers – we’ll need to see proof of your license before we can do this.

 

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.

 

CSS set up

 

The most reliable way to include a specific font into 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/css2?family=Festive&display=swap‘) }

* { font-family: ‘Festive’, cursive; }

</style>

 

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

 


 

 

 

Did you find it helpful? Yes No




UNLEASH THE POWER OF PERSUASION

Crafting a High Converting Sales Landing Page that Captivates and Converts

Online sales are the lifeblood of businesses, but few know how to turn casual browsers into enthusiastic buyers – the difference is a landing page that compels action! 

Get the science behind sales conversion with proven strategies behind sales conversion with proven strategies, psychological triggers, and actionable techniques.

Craft High Converting Sales Pages With Unleash The Power Of Persuasion EBook OP

Sign up for our Newsletter

Struggling with CRM integration?

Tell us more about your pain points, and let's find a solution together.

Want to Get the Most Out of Your Business Day?

Answer these 5 easy questions and let’s find the right solution for your business.

We help you adopt and seamlessly integrate CRM to cut your working hours by half.