Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
68 lines
3.1 KiB
Plaintext
68 lines
3.1 KiB
Plaintext

|
|
|
|
<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
|