Skip to main content
Custom font support is available for email templates built with Elemental markup in Design Studio (Beta). Set a font_family on your email channel element and Courier handles the rest — including automatic font loading for Google Fonts.
This feature applies to Elemental content (version: "2022-01-01") on the email channel only. Classic Designer templates are unaffected.

​
Setting a Custom Font

Add a font_family field to your type: "channel", channel: "email" element. 
{
  "version": "2022-01-01",
  "elements": [
    {
      "type": "channel",
      "channel": "email",
      "font_family": "Roboto, Arial, sans-serif",
      "elements": [
        {
          "type": "meta",
          "title": "Welcome to Courier"
        },
        {
          "type": "text",
          "content": "Thanks for signing up, {{name}}!"
        }
      ]
    }
  ]
}
Pro Tip: Use the exact fontFamily string from the catalog for the most reliable results. Fuzzy matching is supported (e.g., 'Roboto', sans-serif resolves correctly), but the canonical value is safest.
How font loading works:
  • Web-safe fonts (e.g., Verdana, Geneva, sans-serif) — applied via CSS font-family only. No external loading required.
  • Google Fonts (e.g., Roboto, Arial, sans-serif) — the stylesheet is fetched automatically on Courier’s servers. You don’t need to include any <link> tags.
  • Default — if font_family is omitted, Helvetica, Arial, sans-serif is used.

​
Font Catalog

Courier supports 70 fonts across two source types. Query the full catalog via GraphQL to get the latest list and exact fontFamily values.

​
Querying the Catalog

Use the Courier client SDKs to query the font catalog from your application. 
# POST /client/q — authenticate with X-COURIER-CLIENT-KEY header
query {
  fontCatalog {
    name
    fontFamily
    sourceType
    fontUrl
    previewUrl
  }
}
sourceType returns either system (web-safe) or google (Google Fonts). Use the fontFamily field 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 without any external loading. See Web Fonts vs Email-Safe Fonts for background on email client compatibility. The 10 web-safe fonts in the catalog and their fontFamily values are available by querying the catalog with sourceType: "system".

​
Google Fonts

Courier automatically loads these fonts for supported email clients. For unsupported clients, rendering falls back to the next font in the stack (see Email Client Support).
NamefontFamily value
ArchivoArchivo, Arial, sans-serif
Atkinson Hyperlegible'Atkinson Hyperlegible', Arial, sans-serif
BarlowBarlow, Arial, sans-serif
Bricolage Grotesque'Bricolage Grotesque', Arial, sans-serif
CabinCabin, Arial, sans-serif
DM Sans'DM Sans', Arial, sans-serif
Exo 2'Exo 2', Arial, sans-serif
FigtreeFigtree, Arial, sans-serif
IBM Plex Sans'IBM Plex Sans', Arial, sans-serif
InterInter, Arial, sans-serif
Josefin Sans'Josefin Sans', Arial, sans-serif
KarlaKarla, Arial, sans-serif
LatoLato, Arial, sans-serif
LexendLexend, Arial, sans-serif
ManropeManrope, Arial, sans-serif
MontserratMontserrat, Arial, sans-serif
Nunito Sans'Nunito Sans', Arial, sans-serif
Open Sans'Open Sans', Arial, sans-serif
OswaldOswald, Arial, sans-serif
OverpassOverpass, Arial, sans-serif
PoppinsPoppins, Arial, sans-serif
PT Sans'PT Sans', Arial, sans-serif
QuicksandQuicksand, Arial, sans-serif
RalewayRaleway, Arial, sans-serif
Red Hat Display'Red Hat Display', Arial, sans-serif
RobotoRoboto, Arial, sans-serif
Roboto Condensed'Roboto Condensed', Arial, sans-serif
RubikRubik, Arial, sans-serif
SoraSora, Arial, sans-serif
Source Sans 3'Source Sans 3', Arial, sans-serif
Space Grotesk'Space Grotesk', Arial, sans-serif
SyneSyne, Arial, sans-serif
UbuntuUbuntu, Arial, sans-serif
Work Sans'Work Sans', Arial, sans-serif
NamefontFamily value
ArvoArvo, Georgia, serif
CormorantCormorant, Georgia, serif
Crimson Pro'Crimson Pro', Georgia, serif
DM Serif Display'DM Serif Display', Georgia, serif
FrauncesFraunces, Georgia, serif
Libre Baskerville'Libre Baskerville', Georgia, serif
LiterataLiterata, Georgia, serif
LoraLora, Georgia, serif
MerriweatherMerriweather, Georgia, serif
Playfair Display'Playfair Display', Georgia, serif
Roboto Slab'Roboto Slab', Georgia, serif
VollkornVollkorn, Georgia, serif
Zilla Slab'Zilla Slab', Georgia, serif
NamefontFamily value
Abril Fatface'Abril Fatface', Georgia, serif
Bebas Neue'Bebas Neue', Arial, sans-serif
ComfortaaComfortaa, Arial, sans-serif
PacificoPacifico, Arial, sans-serif
RighteousRighteous, Arial, sans-serif
NamefontFamily value
Fira Mono'Fira Mono', 'Courier New', monospace
IBM Plex Mono'IBM Plex Mono', 'Courier New', monospace
InconsolataInconsolata, 'Courier New', monospace
Roboto Mono'Roboto Mono', 'Courier New', monospace
Space Mono'Space Mono', 'Courier New', monospace
NamefontFamily value
CaveatCaveat, Arial, sans-serif
Dancing Script'Dancing Script', Arial, sans-serif
SacramentoSacramento, Georgia, serif

​
Email Client Support

Custom fonts are loaded server-side for supported clients. For unsupported clients, the email falls back gracefully to the next font in the CSS stack — no broken layout, no error.
Email ClientCustom Font Support
Apple Mail (macOS)Supported
Apple Mail (iOS)Supported
HEY webmailSupported
Thunderbird 60+Supported
Gmail (web, Android, iOS)Not supported — falls back to stack
Outlook for WindowsNot supported — falls back to stack
Yahoo MailNot supported — falls back to stack
AOL MailNot supported — falls back to stack
For example, with font_family: "Roboto, Arial, sans-serif", Gmail and Outlook render the email in Arial while Apple Mail renders it in Roboto.
Best Practice: Always include a web-safe fallback in your font stack (e.g., Arial, sans-serif) so the email looks great in all clients, not just those that support custom fonts.

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