Skip to main content

Using fonts

You can use fonts by loading them in a CSS file using @font-face. Web fonts often ship with a css file declaring the fonts, which you can import using the @import statement.

Example using Google Fonts

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

Important when using Webfonts:

  • When using v2.2 or later: We automatically wait for fonts to be loaded, so you don't need to do anything.
  • When using an older version of Remotion: Google Fonts by default appends ?display=swap to their URLs. Make sure to remove it to ensure the video renders correctly if you have a slow internet connection.

Example using local fonts

font.css
css
@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  src: url(./bangers.woff2) format("woff2");
}
font.css
css
@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  src: url(./bangers.woff2) format("woff2");
}
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>;
};

File requirements

Fonts must have one of the following file extensions to be loaded: woff, woff2, ttf, eot.