73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
---
|
|
name: fonts
|
|
description: Loading Google Fonts and local fonts in Remotion
|
|
metadata:
|
|
tags: fonts, google-fonts, typography, text
|
|
---
|
|
|
|
# Using fonts in Remotion
|
|
|
|
## Google Fonts with @remotion/google-fonts
|
|
|
|
The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
|
|
|
|
### Prerequisites
|
|
|
|
First, the @remotion/google-fonts package needs to be installed.
|
|
If it is not installed, use the following command:
|
|
|
|
```bash
|
|
npx remotion add @remotion/google-fonts # If project uses npm
|
|
bunx remotion add @remotion/google-fonts # If project uses bun
|
|
yarn remotion add @remotion/google-fonts # If project uses yarn
|
|
pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
|
|
```
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/google-fonts/Lobster";
|
|
|
|
const { fontFamily } = loadFont();
|
|
|
|
export const MyComposition = () => {
|
|
return <div style={{ fontFamily }}>Hello World</div>;
|
|
};
|
|
```
|
|
|
|
Preferrably, specify only needed weights and subsets to reduce file size:
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/google-fonts/Roboto";
|
|
|
|
const { fontFamily } = loadFont("normal", {
|
|
weights: ["400", "700"],
|
|
subsets: ["latin"],
|
|
});
|
|
```
|
|
|
|
## Using in components
|
|
|
|
Call `loadFont()` at the top level of your component or in a separate file that's imported early:
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/google-fonts/Montserrat";
|
|
|
|
const { fontFamily } = loadFont("normal", {
|
|
weights: ["400", "700"],
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export const Title: React.FC<{ text: string }> = ({ text }) => {
|
|
return (
|
|
<h1
|
|
style={{
|
|
fontFamily,
|
|
fontSize: 80,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{text}
|
|
</h1>
|
|
);
|
|
};
|
|
```
|