Skip to main content

loadFont()v4.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​

MyComp.tsx
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>
  );
};
MyComp.tsx
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.

See also​