Chapter 770: Fonts in the Editor Starter

Core Idea

The Editor Starter comes with various features for controlling which fonts are used by the text and caption items. The font stack is implemented on @remotion/google-fonts.

Key Concepts

• Supported font features
• Default font families
• Changing the default font families
• Lazy-loading font metadata
• Previews in the font dropdown
• Hover to preview font family
• Custom fonts

Code Examples

bun src/scripts/generate-google-font-info.ts

• What it demonstrates: Usage pattern for Fonts in the Editor Starter from the official docs.

Key Takeaways

1. Understand supported font features when working with Fonts in the Editor Starter.
2. Understand default font families when working with Fonts in the Editor Starter.
3. Understand changing the default font families when working with Fonts in the Editor Starter.
4. Understand lazy-loading font metadata when working with Fonts in the Editor Starter.
5. Understand previews in the font dropdown when working with Fonts in the Editor Starter.

Connects To

• Asset Cleanup: related page in the Editor Starter Template section.
• Asset Uploads: related page in the Editor Starter Template section.
• Backend Routes: related page in the Editor Starter Template section.