loadFont()<AvailableFrom v="4.0.165" />

Part of the @remotion/fonts package

Load a local font for use in Remotion.
Automatically blocks the render until the font is ready.

Usage

tsx

import { loadFont } from "@remotion/fonts";
import { AbsoluteFill, staticFile } from "remotion";

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>
  );
};

Options

family

Give the family a name.
You can then reference that name in your CSS using fontFamily.

url

Where to load the font from. Can be a local file using staticFile() or a URL.

format?

Defines the format of the font file. By default gets derived from the file extension of the URL.
Override with one of the following values explicitly: woff2, woff, opentype, truetype.

ascentOverride?

Defines the ascent metric for the font.

descentOverride?

Defines the descent metric for the font.

display?

Equivalent to the CSS font-display property.
Determines how a font face is displayed based on whether and when it is downloaded and ready to use.

featureSettings?

Equivalent to the CSS font-feature-settings property. Allows control over advanced typographic features in OpenType fonts.

lineGapOverride?

Defines the line gap metric for the font.

stretch?

Equivalent to the CSS font-stretch property. Specify what kind of stretch the loaded font has.

style?

Equivalent to the CSS font-style property. Specify what kind of style the loaded font has.

weight?

Equivalent to the CSS font-weight property. Specify what kind of weight the loaded font has.

unicodeRange?

The range of Unicode code points to be used from the font.

loadFont()