Using custom fonts in an email
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 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.
Using it in your HTML
To use a custom font in an Email Design System, 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;”>
Working with Google Fonts
You can use Google Fonts in your emails built in Taxi. To make sure it renders properly in an email, you'll need to get the direct link for the font, in a .woff2 format.
Head to fonts.google.com, and pick your webfont Once you've selected this, click on the black bar at the bottom of the screen, and copy the link to the font.
Open Chrome, Safari or Internet Explorer, and paste this URL into the browser This will serve up a CSS stylesheet which has a .woff2 link, which you can copy into your Email Design System.
Follow the CSS set up instructions above
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.
Last updated