When building your own HTML Email Design System, you might want to incorporate a custom font instead of relying solely on standard options. If your brand guidelines require a specific font, it's crucial to pair it with a reliable fallback to ensure consistency across all email clients.
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
Defining a font stack is essential when using custom fonts. Be sure to include common system fonts to ensure proper email rendering in clients that don’t support custom fonts.
'OpenSansBold', Helvetica, Arial, sans-serif
You have the option to host your custom fonts using a service like Google Fonts or by hosting them yourself. Additionally, we offer font hosting for our customers, provided you can provide proof of your license.
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.