Skip to main content

Using fonts

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

Google Fonts​

Import the CSS that Google Fonts gives you. From version 2.2 on, Remotion will automatically wait until the fonts are loaded.

font.css
css
@import url("https://fonts.googleapis.com/css2?family=Bangers");
font.css
css
@import url("https://fonts.googleapis.com/css2?family=Bangers");
MyComp.tsx
tsx
import "./font.css";
 
const MyComp: React.FC = () => {
  return <div style={{ fontFamily: "Bangers" }}>Hello</div>;
};
MyComp.tsx
tsx
import "./font.css";
 
const MyComp: React.FC = () => {
  return <div style={{ fontFamily: "Bangers" }}>Hello</div>;
};

Example using local fonts​

Put the font into your public/ folder and use the staticFile() API to load the font. Use the FontFace browser API to load the font. Click here to read the syntax that can be used for the Font Face API.

Put this somewhere in your app where it gets executed:

load-fonts.ts
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));
load-fonts.ts
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));

The font is now available for use:

MyComp.tsx
tsx
<div style={{ fontFamily: "Bangers" }}>Some text</div>
MyComp.tsx
tsx
<div style={{ fontFamily: "Bangers" }}>Some text</div>
info

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