> ## Documentation Index
> Fetch the complete documentation index at: https://www.courier.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message`, the default import of the v7 Node SDK. Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Email template fonts

> Set an email font in Design Studio or with font_family, and see how clients load it.

export const Doc = ({href, children, name, bare}) => {
  const label = children || name || href;
  if (bare) {
    return <a href={href}>{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="doc" href={href}>
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method">DOC</span>
    </a>;
};

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 <Doc href="/docs/design/templates/design-studio">Design Studio</Doc>. 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](#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.

```json theme={null}
{
  "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}}!"
        }
      ]
    }
  ]
}
```

The value is a CSS font stack: your chosen font first, then the fallback. Use the exact `fontFamily` string from the [font catalog](#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](#email-client-support) for which ones do.
* **No font set** falls back to `Helvetica, Arial, sans-serif`. If your <Doc href="/docs/design/brands">brand</Doc> 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 <Doc href="/docs/design/templates/html-email">Web Fonts vs Email-Safe Fonts</Doc> for email client compatibility.

| Name            | `fontFamily` value                                 |
| --------------- | -------------------------------------------------- |
| Arial           | `Arial, sans-serif`                                |
| Courier New     | `'Courier New', Courier, monospace`                |
| Georgia         | `Georgia, serif`                                   |
| Helvetica       | `Helvetica, Arial, sans-serif`                     |
| Impact          | `Impact, Charcoal, sans-serif`                     |
| Palatino        | `Palatino Linotype, Book Antiqua, Palatino, serif` |
| Tahoma          | `Tahoma, Geneva, sans-serif`                       |
| Times New Roman | `'Times New Roman', Times, serif`                  |
| Trebuchet MS    | `'Trebuchet MS', Helvetica, sans-serif`            |
| Verdana         | `Verdana, Geneva, sans-serif`                      |

### 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.

<AccordionGroup>
  <Accordion title="Sans-serif (34 fonts)">
    | Name                  | `fontFamily` value                           |
    | --------------------- | -------------------------------------------- |
    | Archivo               | `Archivo, Arial, sans-serif`                 |
    | Atkinson Hyperlegible | `'Atkinson Hyperlegible', Arial, sans-serif` |
    | Barlow                | `Barlow, Arial, sans-serif`                  |
    | Bricolage Grotesque   | `'Bricolage Grotesque', Arial, sans-serif`   |
    | Cabin                 | `Cabin, Arial, sans-serif`                   |
    | DM Sans               | `'DM Sans', Arial, sans-serif`               |
    | Exo 2                 | `'Exo 2', Arial, sans-serif`                 |
    | Figtree               | `Figtree, Arial, sans-serif`                 |
    | IBM Plex Sans         | `'IBM Plex Sans', Arial, sans-serif`         |
    | Inter                 | `Inter, Arial, sans-serif`                   |
    | Josefin Sans          | `'Josefin Sans', Arial, sans-serif`          |
    | Karla                 | `Karla, Arial, sans-serif`                   |
    | Lato                  | `Lato, Arial, sans-serif`                    |
    | Lexend                | `Lexend, Arial, sans-serif`                  |
    | Manrope               | `Manrope, Arial, sans-serif`                 |
    | Montserrat            | `Montserrat, Arial, sans-serif`              |
    | Nunito Sans           | `'Nunito Sans', Arial, sans-serif`           |
    | Open Sans             | `'Open Sans', Arial, sans-serif`             |
    | Oswald                | `Oswald, Arial, sans-serif`                  |
    | Overpass              | `Overpass, Arial, sans-serif`                |
    | Poppins               | `Poppins, Arial, sans-serif`                 |
    | PT Sans               | `'PT Sans', Arial, sans-serif`               |
    | Quicksand             | `Quicksand, Arial, sans-serif`               |
    | Raleway               | `Raleway, Arial, sans-serif`                 |
    | Red Hat Display       | `'Red Hat Display', Arial, sans-serif`       |
    | Roboto                | `Roboto, Arial, sans-serif`                  |
    | Roboto Condensed      | `'Roboto Condensed', Arial, sans-serif`      |
    | Rubik                 | `Rubik, Arial, sans-serif`                   |
    | Sora                  | `Sora, Arial, sans-serif`                    |
    | Source Sans 3         | `'Source Sans 3', Arial, sans-serif`         |
    | Space Grotesk         | `'Space Grotesk', Arial, sans-serif`         |
    | Syne                  | `Syne, Arial, sans-serif`                    |
    | Ubuntu                | `Ubuntu, Arial, sans-serif`                  |
    | Work Sans             | `'Work Sans', Arial, sans-serif`             |
  </Accordion>

  <Accordion title="Serif (13 fonts)">
    | Name              | `fontFamily` value                    |
    | ----------------- | ------------------------------------- |
    | Arvo              | `Arvo, Georgia, serif`                |
    | Cormorant         | `Cormorant, Georgia, serif`           |
    | Crimson Pro       | `'Crimson Pro', Georgia, serif`       |
    | DM Serif Display  | `'DM Serif Display', Georgia, serif`  |
    | Fraunces          | `Fraunces, Georgia, serif`            |
    | Libre Baskerville | `'Libre Baskerville', Georgia, serif` |
    | Literata          | `Literata, Georgia, serif`            |
    | Lora              | `Lora, Georgia, serif`                |
    | Merriweather      | `Merriweather, Georgia, serif`        |
    | Playfair Display  | `'Playfair Display', Georgia, serif`  |
    | Roboto Slab       | `'Roboto Slab', Georgia, serif`       |
    | Vollkorn          | `Vollkorn, Georgia, serif`            |
    | Zilla Slab        | `'Zilla Slab', Georgia, serif`        |
  </Accordion>

  <Accordion title="Display (5 fonts)">
    | Name          | `fontFamily` value                |
    | ------------- | --------------------------------- |
    | Abril Fatface | `'Abril Fatface', Georgia, serif` |
    | Bebas Neue    | `'Bebas Neue', Arial, sans-serif` |
    | Comfortaa     | `Comfortaa, Arial, sans-serif`    |
    | Pacifico      | `Pacifico, Arial, sans-serif`     |
    | Righteous     | `Righteous, Arial, sans-serif`    |
  </Accordion>

  <Accordion title="Monospace (5 fonts)">
    | Name          | `fontFamily` value                          |
    | ------------- | ------------------------------------------- |
    | Fira Mono     | `'Fira Mono', 'Courier New', monospace`     |
    | IBM Plex Mono | `'IBM Plex Mono', 'Courier New', monospace` |
    | Inconsolata   | `Inconsolata, 'Courier New', monospace`     |
    | Roboto Mono   | `'Roboto Mono', 'Courier New', monospace`   |
    | Space Mono    | `'Space Mono', 'Courier New', monospace`    |
  </Accordion>

  <Accordion title="Handwriting (3 fonts)">
    | Name           | `fontFamily` value                    |
    | -------------- | ------------------------------------- |
    | Caveat         | `Caveat, Arial, sans-serif`           |
    | Dancing Script | `'Dancing Script', Arial, sans-serif` |
    | Sacramento     | `Sacramento, Georgia, serif`          |
  </Accordion>
</AccordionGroup>

## 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.

| Email Client                      | Google Fonts  |
| --------------------------------- | ------------- |
| Apple Mail (macOS)                | Supported     |
| Apple Mail (iOS)                  | Supported     |
| HEY webmail                       | Supported     |
| Gmail (web, Android, iOS)         | Not supported |
| Outlook for Windows               | Not supported |
| Outlook for Mac (16.80 and later) | Not supported |
| Outlook.com and Outlook mobile    | Not supported |
| Thunderbird (78.5 and later)      | Not supported |
| Yahoo Mail                        | Not supported |
| AOL Mail                          | Not supported |

With `font_family: "Roboto, Arial, sans-serif"`, Apple Mail renders Roboto and Gmail renders Arial. Support data is from [Can I Email](https://www.caniemail.com/features/css-at-import/), checked July 2026.

<Warning>
  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.
</Warning>

<Tip>
  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.
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="Can I use a font that isn't in the catalog, like our brand font?">
    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.
  </Accordion>

  <Accordion title="Can I use different fonts for different parts of the email?">
    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.
  </Accordion>

  <Accordion title="Why does my email render in the fallback font instead of the font I chose?">
    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.
  </Accordion>
</AccordionGroup>

<CardGroup cols={2}>
  <Card title="Elemental Overview" href="/docs/design/elemental/overview" icon="code">
    Build email content with Elemental markup
  </Card>

  <Card title="Channel Element" href="/docs/design/elemental/elements/channel" icon="envelope">
    The channel element and its fields
  </Card>

  <Card title="CSS Classnames" href="/docs/design/brands#css-class-names" icon="paintbrush">
    Custom CSS for email template blocks
  </Card>

  <Card title="Email Safe Formatting" href="/docs/design/templates/html-email" icon="shield">
    HTML and CSS for cross-client rendering
  </Card>
</CardGroup>