Skip to main content
Pick a font for an email template in Design Studio, or set font_family in Elemental. Both write the same field, so the editor and the API always show the same font. 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.

Set a font

In Design Studio

Open a template’s email channel in . The Email styles panel sits in the right sidebar, below Background color and Content body color:
  1. Font sets the email’s font. All 70 catalog fonts are listed, each with a preview.
  2. Font fallback sets the font used when the recipient’s email client doesn’t support your choice. The list holds the 10 web-safe fonts, which render everywhere. Arial, Verdana, and Georgia are the safest picks.
The editor renders your content in the selected font as you work. The font saves with the template, so it appears in version history.

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.
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 on the recipient’s device. Nothing loads, and they render the same in every email client.
  • Google Fonts load 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 uses a custom MJML template that defines its own font, leaving font_family unset keeps the brand’s font.

Font catalog

Courier supports 70 fonts: 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

These fonts ship with most operating systems, so nothing loads externally and every email client renders them the same. They are also the options in the Font fallback picker in Design Studio. See for email client compatibility.

Google Fonts

Courier adds the stylesheet import automatically. Every stack ends in a web-safe fallback, so clients without web font support render the next font in the stack.

Email client support

Each email client decides 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. Nothing breaks, and there’s no error. The table covers Google Fonts only, since web-safe fonts need no loading. 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, so text can drop to Times New Roman instead of the next font in your stack. If many 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 catalog value already does, and the Font fallback picker handles it in Design Studio. 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, so an off-catalog font renders only for recipients who already have it installed. You can’t upload or self-host a font file. For a font you need loaded, choose one from the catalog.
The font is set once per email channel and applies to all text in that email, including button labels. To mix typefaces, vary weight and size on individual blocks.
The recipient opened it in a client without web font support, most likely Gmail or Outlook for Windows. That’s intended: the client uses the next font in the stack. Open the same email in Apple Mail to confirm your font applies. In Outlook for Windows, text can land on Times New Roman rather than your fallback.

Elemental Overview

Build email content with Elemental markup

Channel Element

The channel element and its fields

CSS Classnames

Custom CSS for email template blocks

Email Safe Formatting

HTML and CSS for cross-client rendering