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.csscss
@import url("https://fonts.googleapis.com/css2?family=Bangers");
font.csscss
@import url("https://fonts.googleapis.com/css2?family=Bangers");
MyComp.tsxtsx
import "./font.css";ÂconstMyComp :React .FC = () => {return <div style ={{fontFamily : "Bangers" }}>Hello</div >;};
MyComp.tsxtsx
import "./font.css";ÂconstMyComp :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.csscss
@font-face {font-family: "Bangers";font-style: normal;font-weight: 400;src: url(./bangers.woff2) format("woff2");}
font.csscss
@font-face {font-family: "Bangers";font-style: normal;font-weight: 400;src: url(./bangers.woff2) format("woff2");}
MyComp.tsxtsx
import "./font.css";ÂconstMyComp :React .FC = () => {return <div style ={{fontFamily : "Bangers" }}>Hello</div >;};
MyComp.tsxtsx
import "./font.css";ÂconstMyComp :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
.