mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
85 lines
1.9 KiB
Plaintext
85 lines
1.9 KiB
Plaintext
---
|
|
title: "Font"
|
|
sidebarTitle: "Font"
|
|
description: "A React Font component to set your fonts."
|
|
"og:image": "https://react.email/static/covers/font.png"
|
|
icon: "book-font"
|
|
---
|
|
|
|
import Support from '/snippets/support.mdx'
|
|
|
|
## Install
|
|
|
|
Install component from your command line.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install react-email -E
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add react-email -E
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add react-email -E
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## 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](https://www.caniemail.com/features/css-at-font-face/)
|
|
|
|
```jsx
|
|
import { Font, Head, Html } from "react-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
|
|
|
|
<ResponseField name="fontFamily" type="string">
|
|
The font family you want to use. If the webFont property is configured, this
|
|
should contain the name of that font
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fallbackFontFamily" type="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.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="webFont" type="{url: string, format: string} | undefined">
|
|
The webFont the supported email client should use
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fontWeight" type="number | string">
|
|
The weight of the font
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fontStyle" type="string">
|
|
The style of the font
|
|
</ResponseField>
|
|
|
|
<Support/>
|