Fonts

Kinetograph never reads the operating system's fonts. In a TSX project, register a font before text uses it.

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

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

On a HyperFrames page, the 18 families HyperFrames embeds are built in, and names like Arial map to them as in HyperFrames.

Google Fonts download once and are kept in ~/.cache/kinetograph/fonts. A font file in your project uses loadFont from @remotion/fonts, with the path from staticFile. In a .json scene, the fonts object maps family names to files.

CJK and Arabic have no bundled font, so load one that has them.

See alsoCopy Anchor Link

• Authoring: fonts
• Migrate from HyperFrames
• Public directory