Chapter 197: Using fonts

Core Idea

Here are some ways how you can use custom fonts in Remotion.

Key Concepts

• Google Fonts using @remotion/google-fonts
• Google Fonts using CSS
• Local fonts using @remotion/fonts
• Local fonts (manually)

Code Examples

const { fontFamily } = loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});

const GoogleFontsComp: React.FC = () => {
  return <div style={{ fontFamily }}>Hello, Google Fonts</div>;
};

• What it demonstrates: Usage pattern for Using fonts from the official docs.

Key Takeaways

1. Understand google fonts using @remotion/google-fonts when working with Using fonts.
2. Understand google fonts using css when working with Using fonts.
3. Understand local fonts using @remotion/fonts when working with Using fonts.
4. Understand local fonts (manually) when working with Using fonts.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.