66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
For local font files, use the `@remotion/fonts` package.
|
|
|
|
### Prerequisites
|
|
|
|
First, install @remotion/fonts:
|
|
|
|
```bash
|
|
npx remotion add @remotion/fonts # If project uses npm
|
|
bunx remotion add @remotion/fonts # If project uses bun
|
|
yarn remotion add @remotion/fonts # If project uses yarn
|
|
pnpm exec remotion add @remotion/fonts # If project uses pnpm
|
|
```
|
|
|
|
### Loading a local font
|
|
|
|
Place your font file in the `public/` folder and use `loadFont()`:
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/fonts";
|
|
import { staticFile } from "remotion";
|
|
|
|
await loadFont({
|
|
family: "MyFont",
|
|
url: staticFile("MyFont-Regular.woff2"),
|
|
});
|
|
|
|
export const MyComposition = () => {
|
|
return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
|
|
};
|
|
```
|
|
|
|
### Loading multiple weights
|
|
|
|
Load each weight separately with the same family name:
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/fonts";
|
|
import { staticFile } from "remotion";
|
|
|
|
await Promise.all([
|
|
loadFont({
|
|
family: "Inter",
|
|
url: staticFile("Inter-Regular.woff2"),
|
|
weight: "400",
|
|
}),
|
|
loadFont({
|
|
family: "Inter",
|
|
url: staticFile("Inter-Bold.woff2"),
|
|
weight: "700",
|
|
}),
|
|
]);
|
|
```
|
|
|
|
### Available options
|
|
|
|
```tsx
|
|
loadFont({
|
|
family: "MyFont", // Required: name to use in CSS
|
|
url: staticFile("font.woff2"), // Required: font file URL
|
|
format: "woff2", // Optional: auto-detected from extension
|
|
weight: "400", // Optional: font weight
|
|
style: "normal", // Optional: normal or italic
|
|
display: "block", // Optional: font-display behavior
|
|
});
|
|
```
|