Skip to main content
A React Font component to set your font family for the entire email.

​
Installation

npm install @react-email/font -E

​
Usage

Add the component to your email template inside the <Head> component. 
import { Html } from "@react-email/html";
import { Head } from "@react-email/head";
import { Font } from "@react-email/font";

const Email = () => {
  return (
    <Html lang="en">
      <Head>
        <Font
          fontFamily="Roboto"
          fallbackFontFamily="Verdana"
          webFont={{
            url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
            format: "woff2",
          }}
        />
      </Head>
    </Html>
  );
};

​
Props

​
fontFamily
string
required
The font you want to use. Note: Do not insert multiple fonts here, use fallbackFontFamily for that
​
fallbackFontFamily
FallbackFont | FallbackFont[]
required
Fallback font(s) to use when the primary font is unavailable. Can be a single font or an array (order determines priority)
​
webFont
object
Web font configuration for loading custom fonts. Not all email clients support web fonts - check caniemail.com for support
  • url (string): The URL to the font file
  • format (FontFormat): The font format (e.g., "woff", "woff2", "truetype", etc.)
​
fontStyle
FontStyle
default:"normal"
The font style (e.g., "normal", "italic")
​
fontWeight
FontWeight
default:"400"
The font weight (e.g., 400, 700, "bold")

​
Fallback Font Options

The following fallback fonts are supported:
  • Arial
  • Helvetica
  • Verdana
  • Georgia
  • Times New Roman
  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

​
Font Format Options

  • woff
  • woff2
  • truetype
  • opentype
  • embedded-opentype
  • svg

​
Example with Multiple Fallbacks

import { Font } from "@react-email/font";

const Email = () => {
  return (
    <Head>
      <Font
        fontFamily="Inter"
        fallbackFontFamily={["Arial", "Helvetica", "sans-serif"]}
        webFont={{
          url: "https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2",
          format: "woff2",
        }}
        fontWeight={400}
      />
    </Head>
  );
};

​
Important Notes

The Font component MUST be placed inside the <Head> tag.
Not all email clients support web fonts. For clients that don’t support them, the fallback font will be used instead. Always test your emails across different clients.

​
TypeScript

export interface FontProps {
  fontFamily: string;
  fallbackFontFamily: FallbackFont | FallbackFont[];
  webFont?: {
    url: string;
    format: FontFormat;
  };
  fontStyle?: FontStyle;
  fontWeight?: FontWeight;
}

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us