# @react-email/font

> A React Font component to set your fonts

Latest version **0.0.10** (published 2025-12-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @react-email/font
pnpm add @react-email/font
yarn add @react-email/font
bun add @react-email/font
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2025-12-29 |
| First published | 2023-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 0 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zenorocha, bukinoshita, gabrielmfern |

## Links

- npm: https://www.npmjs.com/package/@react-email/font
- npm.io page: https://npm.io/package/@react-email/font

## Recent versions

- 0.0.10 (latest) — 2025-12-29
- 0.0.9-canary.1 (canary) — 2024-12-03
- 0.0.9 — 2024-12-03
- 0.0.9-canary.0 — 2024-11-08
- 0.0.8 — 2024-08-22
- 0.0.8-canary.0 — 2024-07-23
- 0.0.7 — 2024-07-23
- 0.0.7-canary.1 — 2024-07-15
- 0.0.7-canary.0 — 2024-07-03
- 0.0.6 — 2024-04-29
- 0.0.5 — 2023-12-01
- 0.0.4 — 2023-10-27
- 0.0.3 — 2023-07-04
- 0.0.2 — 2023-06-16
- 0.0.1 — 2023-02-22

## README

![React Email Font cover](https://react.email/static/covers/font.png)

<div align="center"><strong>@react-email/font</strong></div>
<div align="center">A React Font component to set your font family.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a> 
<span> · </span>
<a href="https://react.email">Documentation</a> 
<span> · </span>
<a href="https://react.email">Twitter</a>
</div>

## Install

Install component from your command line.

#### With yarn

```sh
yarn add @react-email/font -E
```

#### With npm

```sh
npm install @react-email/font -E
```

## Getting started

Add the component to your email template.

```jsx
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>
  );
};
```

## Support

This component was tested using the most popular email clients.

| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Gmail ✔                                                                                           | Apple Mail ✔                                                                                           | Outlook ✔                                                                                             | Yahoo! Mail ✔                                                                                                | HEY ✔                                                                                         | Superhuman ✔                                                                                                |

## License

MIT License

---
_Source: https://npm.io/package/@react-email/font · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
