1---
2name: fonts
3description: Loading Google Fonts and local fonts in Remotion
4metadata:
5  tags: fonts, google-fonts, typography, text
6---
7 
8# Using fonts in Remotion
9 
10## Google Fonts with @remotion/google-fonts
11 
12The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
13 
14### Prerequisites
15 
16First, the @remotion/google-fonts package needs to be installed.
17If it is not installed, use the following command:
18 
19```bash
20npx remotion add @remotion/google-fonts # If project uses npm
21bunx remotion add @remotion/google-fonts # If project uses bun
22yarn remotion add @remotion/google-fonts # If project uses yarn
23pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
24```
25 
26```tsx
27import { loadFont } from "@remotion/google-fonts/Lobster";
28 
29const { fontFamily } = loadFont();
30 
31export const MyComposition = () => {
32  return <div style={{ fontFamily }}>Hello World</div>;
33};
34```
35 
36Preferrably, specify only needed weights and subsets to reduce file size:
37 
38```tsx
39import { loadFont } from "@remotion/google-fonts/Roboto";
40 
41const { fontFamily } = loadFont("normal", {
42  weights: ["400", "700"],
43  subsets: ["latin"],
44});
45```
46 
47### Waiting for font to load
48 
49Use `waitUntilDone()` if you need to know when the font is ready:
50 
51```tsx
52import { loadFont } from "@remotion/google-fonts/Lobster";
53 
54const { fontFamily, waitUntilDone } = loadFont();
55 
56await waitUntilDone();
57```
58 
59## Local fonts with @remotion/fonts
60 
61For local font files, use the `@remotion/fonts` package.
62 
63### Prerequisites
64 
65First, install @remotion/fonts:
66 
67```bash
68npx remotion add @remotion/fonts # If project uses npm
69bunx remotion add @remotion/fonts # If project uses bun
70yarn remotion add @remotion/fonts # If project uses yarn
71pnpm exec remotion add @remotion/fonts # If project uses pnpm
72```
73 
74### Loading a local font
75 
76Place your font file in the `public/` folder and use `loadFont()`:
77 
78```tsx
79import { loadFont } from "@remotion/fonts";
80import { staticFile } from "remotion";
81 
82await loadFont({
83  family: "MyFont",
84  url: staticFile("MyFont-Regular.woff2"),
85});
86 
87export const MyComposition = () => {
88  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
89};
90```
91 
92### Loading multiple weights
93 
94Load each weight separately with the same family name:
95 
96```tsx
97import { loadFont } from "@remotion/fonts";
98import { staticFile } from "remotion";
99 
100await Promise.all([
101  loadFont({
102    family: "Inter",
103    url: staticFile("Inter-Regular.woff2"),
104    weight: "400",
105  }),
106  loadFont({
107    family: "Inter",
108    url: staticFile("Inter-Bold.woff2"),
109    weight: "700",
110  }),
111]);
112```
113 
114### Available options
115 
116```tsx
117loadFont({
118  family: "MyFont", // Required: name to use in CSS
119  url: staticFile("font.woff2"), // Required: font file URL
120  format: "woff2", // Optional: auto-detected from extension
121  weight: "400", // Optional: font weight
122  style: "normal", // Optional: normal or italic
123  display: "block", // Optional: font-display behavior
124});
125```
126 
127## Using in components
128 
129Call `loadFont()` at the top level of your component or in a separate file that's imported early:
130 
131```tsx
132import { loadFont } from "@remotion/google-fonts/Montserrat";
133 
134const { fontFamily } = loadFont("normal", {
135  weights: ["400", "700"],
136  subsets: ["latin"],
137});
138 
139export const Title: React.FC<{ text: string }> = ({ text }) => {
140  return (
141    <h1
142      style={{
143        fontFamily,
144        fontSize: 80,
145        fontWeight: "bold",
146      }}
147    >
148      {text}
149    </h1>
150  );
151};
152```
153