When I first started working with custom fonts in HTML email design, I quickly realized how important it is to pick a solid fallback. If you’re using a custom font for branding, always define a backup font that works well on most systems.
Email client support can be hit or miss, and not all email clients support custom fonts.
Here’s a quick list of those that do:
- Apple Mail
- iOS Mail
- Samsung Mail
- Outlook.com
To ensure your email looks good everywhere, define a font-stack. Include basic system fonts like ‘OpenSansBold’, Helvetica, Arial, and sans-serif for clients that don’t support custom fonts.
To host your custom fonts, you can either use Google Fonts or host them yourself. If you want us to host them for you, we’ll need proof of your font license first.
If your custom fonts aren’t supported, be sure to select fallback fonts commonly available on most computers. This ensures your email renders as intended, even when custom fonts aren’t supported.
For the most reliable method, use @font-face in your CSS to link your custom fonts. Here’s an example:
<style>
@font-face { font-family: ‘Festive’, cursive; src: url(‘https://fonts.googleapis.com/css2?family=Festive&display=swap’); }
* { font-family: ‘Festive’, cursive; }
</style>
For Outlook 2007, 2010, and 2017, wrap the @font-face inside a @media tag since those versions don’t support custom fonts.
