apps/docs/components/font.mdx
import Support from '/snippets/support.mdx'
Install component from your command line.
<CodeGroup>npm install @react-email/components -E
# or get the individual package
npm install @react-email/font -E
yarn add @react-email/components -E
# or get the individual package
yarn add @react-email/font -E
pnpm add @react-email/components -E
# or get the individual package
pnpm add @react-email/font -E
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>
);
};