Remotion Rule: Fonts

What it is

This Remotion skill rule covers loading Google Fonts and local fonts in Remotion projects. Remotion renders video frames as React components, which means font loading follows web patterns but with video-specific constraints. Fonts must be fully loaded before any frame renders, or you get fallback text in your output video.

This rule is part of the official Remotion Agent Skill set. It provides AI agents and developers with the correct patterns for font usage in programmatic video production, avoiding the common mistake of rendering frames before fonts are available.

Why it saves time or tokens

Font loading bugs in Remotion produce videos with system fallback fonts on random frames. Debugging which frames failed is time-consuming because the issue is non-deterministic. This skill rule gives a deterministic pattern that works on the first render. When an AI agent generates a Remotion composition, following this rule eliminates font-related re-renders.

How to use

1. Choose between Google Fonts (remote) or local font files bundled in your project
2. Use the @remotion/google-fonts package for Google Fonts or staticFile() for local fonts
3. Ensure fonts are loaded at the composition level before any component renders text

Example

// Google Fonts approach
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

const MyTitle = () => (
  <h1 style={{ fontFamily }}>Hello World</h1>
);

// Local font approach
import { staticFile } from 'remotion';

const localFont = new FontFace(
  'CustomFont',
  `url(${staticFile('fonts/custom.woff2')})`
);

await localFont.load();
document.fonts.add(localFont);

Related on TokRepo

• AI tools for video — video production tools and skills on TokRepo
• AI tools for design — design tools for visual content creation

Common pitfalls

• Importing Google Fonts via CSS @import in Remotion causes race conditions; always use the @remotion/google-fonts package
• Local font files must be in the public/ directory and loaded via staticFile(); relative paths break during rendering
• Not awaiting font load before render causes random frames to use fallback fonts, producing inconsistent video output