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

# Fonts

> Apply fonts to Elemental email templates using Google Fonts or web-safe fonts, with automatic font loading and graceful fallback across email clients.

Font support is available for email templates built with [Elemental markup](/platform/content/elemental/elemental-overview) in [Design Studio (Beta)](/platform/content/design-studio/design-studio-overview). Set a `font_family` on your email channel element and Courier handles the rest — including automatic font loading for Google Fonts.

<Note>
  This feature applies to Elemental content (`version: "2022-01-01"`) on the email channel only. Classic Designer templates are unaffected.
</Note>

## Setting a Font

Add a `font_family` field to your `type: "channel"`, `channel: "email"` element.

```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}}!"
        }
      ]
    }
  ]
}
```

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

**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](/sdk-libraries/sdks-overview#client-side-sdks) to query the font catalog from your application.

```graphql icon="code" theme={null}
# 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](/platform/content/email-safe-formatting#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](#email-client-support)).

<AccordionGroup>
  <Accordion title="Sans-serif (28 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 (14 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 (6 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 (6 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

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 Client              | Font Support                        |
| ------------------------- | ----------------------------------- |
| Apple Mail (macOS)        | Supported                           |
| Apple Mail (iOS)          | Supported                           |
| HEY webmail               | Supported                           |
| Thunderbird 60+           | Supported                           |
| Gmail (web, Android, iOS) | Not supported — falls back to stack |
| Outlook for Windows       | Not supported — falls back to stack |
| Yahoo Mail                | Not supported — falls back to stack |
| AOL Mail                  | Not 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.

<Tip>
  **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 web fonts.
</Tip>

<CardGroup cols={2}>
  <Card title="Elemental Overview" href="/platform/content/elemental/elemental-overview" icon="code">
    Learn how to build email content with Elemental markup
  </Card>

  <Card title="Channel Element" href="/platform/content/elemental/elements/channel" icon="envelope">
    Full reference for the channel element and its fields
  </Card>

  <Card title="CSS Classnames" href="/platform/content/brands/css-classnames" icon="paintbrush">
    Apply custom CSS styles to Courier email template blocks
  </Card>

  <Card title="Email Safe Formatting" href="/platform/content/email-safe-formatting" icon="shield">
    HTML and CSS best practices for cross-client email rendering
  </Card>
</CardGroup>