Skip to main content

Using Custom Fonts in the Email Builder

Creating a unique and branded email design often involves using custom fonts. If you have specific brand guidelines that require a custom font, it's crucial to pair it with a reliable fallback to ensure consistency across various email clients.

Email Client Support​

Custom font support varies across different email clients. Here are the clients that do support custom fonts:

  • Apple Mail
  • iOS Mail
  • Samsung Mail
  • Outlook.com

For those clients that don't support custom fonts, it's important to define a font stack. This stack should include standard system fonts to ensure your email displays correctly. An example of a font stack could be:

'OpenSansBold', Helvetica, Arial, sans-serif

Hosting Custom Fonts​

You have a couple of options for hosting your custom fonts:

  • Google Fonts: A popular choice for hosting fonts.
  • Self-hosting: You can host the fonts on your own server.

If you prefer, Stack can also host your custom fonts. Please note that you will need to provide proof of your font license for this service.

Fallback Fonts​

In cases where your custom fonts aren't supported, selecting fallback fonts that are widely available on most computers is essential. This ensures your email maintains a consistent appearance even when custom fonts can't be displayed.

CSS Setup​

The most reliable method to include a specific font in your email is by using @font-face. Here's an example of how to implement it:

<style>
  @font-face {
    font-family: 'Festive', cursive;
    src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
  }
  * {
    font-family: 'Festive', cursive;
  }
</style>

Special Consideration for Outlook​

When dealing with Outlook (versions 2007, 2010, and 2017), it's necessary to wrap the @font-face rule within a @media tag due to lack of support in these versions. This ensures that your custom fonts are applied correctly wherever possible.

By following these guidelines, you can effectively incorporate custom fonts into your email designs, enhancing your brand's visual identity while ensuring broad compatibility.