Skip to content
JSX email

Font

Sets up custom fonts for use in email

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

FontExample.jsx
import { Font, Head, Html } from 'jsx-email';


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

TypeScript Interface

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

Required Props

fontFamily

fontFamily: string;

The primary font family name. Should match webFont name if using web fonts.

fallbackFontFamily

fallbackFontFamily: FallbackFont | FallbackFont[];

Fallback font(s) to use when web fonts aren’t supported or primary font is unavailable.

Optional Props

fontStyle

fontStyle?: FontStyle;

Font style variation. Defaults to 'normal'.

fontWeight

fontWeight?: FontWeight;

Font weight value. Defaults to 400.

webFont

webFont?: {
  format: FontFormat;
  url: string;
}

Web font configuration:

  • format: Font file format (e.g., ‘woff2’)
  • url: URL to font file