1For local font files, use the `@remotion/fonts` package.
2 
3### Prerequisites
4 
5First, install @remotion/fonts:
6 
7```bash
8npx remotion add @remotion/fonts # If project uses npm
9bunx remotion add @remotion/fonts # If project uses bun
10yarn remotion add @remotion/fonts # If project uses yarn
11pnpm exec remotion add @remotion/fonts # If project uses pnpm
12```
13 
14### Loading a local font
15 
16Place your font file in the `public/` folder and use `loadFont()`:
17 
18```tsx
19import { loadFont } from "@remotion/fonts";
20import { staticFile } from "remotion";
21 
22await loadFont({
23  family: "MyFont",
24  url: staticFile("MyFont-Regular.woff2"),
25});
26 
27export const MyComposition = () => {
28  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
29};
30```
31 
32### Loading multiple weights
33 
34Load each weight separately with the same family name:
35 
36```tsx
37import { loadFont } from "@remotion/fonts";
38import { staticFile } from "remotion";
39 
40await Promise.all([
41  loadFont({
42    family: "Inter",
43    url: staticFile("Inter-Regular.woff2"),
44    weight: "400",
45  }),
46  loadFont({
47    family: "Inter",
48    url: staticFile("Inter-Bold.woff2"),
49    weight: "700",
50  }),
51]);
52```
53 
54### Available options
55 
56```tsx
57loadFont({
58  family: "MyFont", // Required: name to use in CSS
59  url: staticFile("font.woff2"), // Required: font file URL
60  format: "woff2", // Optional: auto-detected from extension
61  weight: "400", // Optional: font weight
62  style: "normal", // Optional: normal or italic
63  display: "block", // Optional: font-display behavior
64});
65```
66