Skip to main content
Pick a font for an email template in Design Studio, or set font_family on the email channel element in Elemental. Both write the same field, so a font chosen in the editor is visible through the API and vice versa. Your font applies to all text in the email: headings, body copy, lists, and button labels. For Google Fonts, Courier also adds the stylesheet import to the email’s head, so you never host font files or add tags yourself. Fonts are an email channel setting, so SMS, push, and in-app content aren’t affected.

​
Setting a Font

​
In Design Studio

Open a template’s email channel in Design Studio and find the Email styles panel in the right sidebar, below Background color and Content body color:
  1. Font sets the font for the email. All 70 catalog fonts are available, with a preview of each one.
  2. Font fallback sets the font to use when the recipient’s email client doesn’t support your choice. This list holds the 10 web-safe fonts, since those render everywhere. Arial, Verdana, and Georgia are the safest picks.
The editor renders your content in the selected font as you work, and the font is saved with the template, so it appears in version history alongside your other changes.

​
In Elemental

Add a font_family field to your type: "channel", channel: "email" element. It belongs on the channel element, not on the top-level content object, and works the same in a stored template or in content you pass inline to the Send API.
The value is a CSS font stack: your chosen font first, then the fallback. Use the exact fontFamily string from the font catalog below. Courier matches on the first font in the stack, so 'Roboto', sans-serif still resolves, but the canonical value is safest.

​
How Font Loading Works

  • Web-safe fonts are already installed on the recipient’s device. Nothing is loaded, and they render consistently in every email client.
  • Google Fonts are loaded through an @import rule that Courier injects into the email’s head at send time. The recipient’s email client fetches the stylesheet if it supports that rule. See Email Client Support for which ones do.
  • No font set falls back to Helvetica, Arial, sans-serif. If your brand uses a custom MJML template that defines its own font, leaving font_family unset keeps the brand’s font instead of overriding it.

​
Font Catalog

Courier supports 70 fonts across two source types: 10 web-safe fonts and 60 Google Fonts. Use the fontFamily value as-is for the font_family property in your Elemental content.

​
Web-Safe Fonts

Web-safe fonts are installed on most operating systems and render consistently across all email clients with no external loading. These are also the options in the Font fallback picker in Design Studio. See Web Fonts vs Email-Safe Fonts for background on email client compatibility.

​
Google Fonts

Courier adds the stylesheet import for these fonts automatically. Every stack ends in a web-safe fallback, so clients that don’t support web fonts render the next font in the stack.

​
Email Client Support

Email clients decide for themselves whether to honor the @import rule that loads a Google Font. Clients that don’t support it strip the import and use your fallback font instead. Nothing breaks, and there’s no error. This table covers Google Fonts only, since web-safe fonts need no loading and render in every client. With font_family: "Roboto, Arial, sans-serif", Apple Mail renders Roboto and Gmail renders Arial. Support data is from Can I Email, checked July 2026.
Outlook for Windows is the one client where the fallback isn’t dependable. It reads the import but ignores remotely hosted fonts, and affected text can drop to Times New Roman instead of the next font in your stack. If many of your recipients read email in Outlook for Windows, pick a web-safe font for that template.
Always end a font stack with a web-safe font. Every value in the catalog already does, and the Font fallback picker in Design Studio handles it for you, so this only matters when you write a stack by hand.

​
FAQ

You can pass any CSS font stack through font_family, and Courier applies it as the email’s font-family. Only the 70 catalog fonts get a stylesheet import, though, so an off-catalog font renders only for recipients who already have it installed. There’s no way to upload or self-host a font file, so for anything you want loaded, choose a catalog font.
No. The font is set once per email channel and applies to all text in that email, including button labels. To mix typefaces, use one font and vary weight and size on individual blocks.
The recipient opened it in a client that doesn’t support web fonts, most likely Gmail or Outlook for Windows. That’s the intended behavior: the client uses the next font in the stack. Open the same email in Apple Mail to confirm your font is applied. In Outlook for Windows specifically, text can land on Times New Roman rather than your fallback.

Elemental Overview

Learn how to build email content with Elemental markup

Channel Element

Full reference for the channel element and its fields

CSS Classnames

Apply custom CSS styles to Courier email template blocks

Email Safe Formatting

HTML and CSS best practices for cross-client email rendering