Install

Install component from your command line.

npm install @react-email/components -E

# or get the individual package

npm install @react-email/font -E

Getting started

Add the component to your email template. This applies your font to all tags inside your email. Note, that not all email clients supports web fonts, this is why it is important to configure your fallbackFontFamily. To view all email clients that supports web fonts see

import { Font, Head, Html } from "@react-email/components";

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",
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
    </Html>
  );
};

Props

fontFamily
string

The font family you want to use. If the webFont property is configured, this should contain the name of that font

fallbackFontFamily
string

The fallback font family the system should you, if web fonts are not supported or the chosen font is not installed on the system.

webFont
{url: string, format: string} | undefined

The webFont the supported email client should use

fontWeight
number | string

The weight of the font

fontStyle
string

The style of the font

Support

All components were tested using the most popular email clients.

Gmail

Gmail

Apple Mail

Apple Mail

Outlook

Outlook

Yahoo! Mail

Yahoo! Mail

HEY

HEY

Superhuman

Superhuman