Using Custom Fonts in the Email Builder

Email Client Support (What to Expect)

Email clients don’t all render fonts the same way. Some can display custom fonts, while others will replace them with system defaults. That’s why your fallback font stack matters just as much as the custom font you choose.

Define a Safe Font Stack

Always define a font stack so your email remains readable and on-brand even when custom fonts don’t load.

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

Using Google Fonts

You can use Google Fonts, but remember: email support varies. The safest approach is to apply the custom font where it matters most (like headings) and rely on strong fallbacks for everything else.

<style>
/* If your email client supports it, it may load your custom font */
@font-face {
  font-family: 'YourCustomFont';
  src: url('https://your-font-file-url.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Apply with fallbacks */
.email-body {
  font-family: 'YourCustomFont', Helvetica, Arial, sans-serif;
}
</style>

Best Practices

• Always include fallbacks (this is non-negotiable for email).
• Use custom fonts sparingly (headlines or key sections) for safer consistency.
• Keep typography simple for Outlook desktop compatibility.
• Test before you send (especially if your audience uses Outlook).
• Host font files securely if you use @font-face with self-hosted fonts.