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## Using in components
48 
49Call `loadFont()` at the top level of your component or in a separate file that's imported early:
50 
51```tsx
52import { loadFont } from "@remotion/google-fonts/Montserrat";
53 
54const { fontFamily } = loadFont("normal", {
55  weights: ["400", "700"],
56  subsets: ["latin"],
57});
58 
59export const Title: React.FC<{ text: string }> = ({ text }) => {
60  return (
61    <h1
62      style={{
63        fontFamily,
64        fontSize: 80,
65        fontWeight: "bold",
66      }}
67    >
68      {text}
69    </h1>
70  );
71};
72```
73