ContextQMD
Back to Remotion

Using fonts

packages/docs/docs/fonts.mdx

4.0.4732.5 KB
Original Source

Here are some ways how you can use custom fonts in Remotion.

Google Fonts using @remotion/google-fonts

available from v3.2.40

@remotion/google-fonts is a type-safe way to load Google fonts without having to create CSS files.

tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";

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

const GoogleFontsComp: React.FC = () => {
  return <div style={{ fontFamily }}>Hello, Google Fonts</div>;
};

For projects with multiple fonts, load fonts in one shared module and wait until they are ready before rendering. If you use text measurement APIs, see the higher-order component example.

Google Fonts using CSS

Import the CSS that Google Fonts gives you.

:::note From version 2.2 on, Remotion will automatically wait until the fonts are loaded.
:::

css
@import url("https://fonts.googleapis.com/css2?family=Bangers");
tsx
import "./font.css";

const MyComp: React.FC = () => {
  return <div style={{ fontFamily: "Bangers" }}>Hello</div>;
};

Local fonts using @remotion/fonts

available from v4.0.164

Put the font into your public/ folder.
Put the loadFont() call somewhere in your app where it gets executed:

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

const fontFamily = "Inter";

loadFont({
  family: fontFamily,
  url: staticFile("Inter-Regular.woff2"),
  weight: "500",
}).then(() => {
  console.log("Font loaded!");
});

The font is now available for use:

tsx
const fontFamily = "Inter";

// ---cut---

<div style={{ fontFamily: fontFamily }}>Some text</div>;

Local fonts (manually)

You may load fonts by using the web-native FontFace API.

tsx
import { continueRender, delayRender, staticFile } from "remotion";

const waitForFont = delayRender();
const font = new FontFace(
  `Bangers`,
  `url('${staticFile("bangers.woff2")}') format('woff2')`,
);

font
  .load()
  .then(() => {
    document.fonts.add(font);
    continueRender(waitForFont);
  })
  .catch((err) => console.log("Error loading font", err));

:::note If your Typescript types give errors, install the newest version of the @types/web package. :::