When creating your own HTML email template, 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 a proof of your licence 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 machines. 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:

@font-face {
font-family: 'OpenSansLight';
src: url('https://yoururl.com/opensans.woff2') format('woff2'),
url('https://yoururl.com/opensans.woff') format('woff');
}

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. This will  

Using it in your HTML

To use a custom font in a Taxi template, you should define it as you would when working with a standard font. An example of this would be: 

<td style=”font-family: 'OpenSansBold', Helvetica, Arial, sans-serif;”>

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

In plain English, this means that a source (i.e. the email client rendering the email) makes a request to a domain that is different to the sending domain of the email.

By setting the CORS correctly, this will tell the email client to verify this request. This is usually set up in the hosting tool that you're using.

When we host fonts for you, we can set this header up for you.

Did this answer your question?