Chapter 198: loadFont()

Core Idea

Part of the @remotion/fonts package

Key Concepts

• Usage
• Options
• family
• url
• format?
• ascentOverride?
• descentOverride?
• display?

Code Examples

loadFont({
  family: "Bangers",
  url: staticFile("bangers.ttf"),
}).then(() => console.log("Font loaded!"));

export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: "Bangers",
      }}
    >
      <h1>Local Font</h1>
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for loadFont() from the official docs.

Key Takeaways

1. Understand usage when working with loadFont().
2. Understand options when working with loadFont().
3. Understand family when working with loadFont().
4. Understand url when working with loadFont().
5. Understand format? when working with loadFont().

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.