Chapter 206: loadFont()

Core Idea

Part of the @remotion/google-fonts package

Key Concepts

• Usage
• Arguments
• style
• options
• weights?
• subsets?
• document?
• ignoreTooManyRequestsWarning?<AvailableFrom v="4.0.283" />

Code Examples

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

export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: fontFamily,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand usage when working with loadFont().
2. Understand arguments when working with loadFont().
3. Understand style when working with loadFont().
4. Understand options when working with loadFont().
5. Understand weights? 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.