Custom font

Loading fonts from the web

To use a font from hosters like Google Fonts. First make a css file under src


root
└─src
  ├─scenes/
  ├─revideo.d.ts
  ├─project.meta
  ├─project.ts
+ └─global.css

Inside global.css, import the font using @import url(your link).


@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

Then, in project.ts, import the css file.


import {makeProject} from '@revideo/core';
 
import example from './scenes/example?scene';
 
import './global.css'; // <- import the css
 
export default makeProject({
  scenes: [example],
});

Now you can reference the fonts in the fontFamily property in this project.


<Txt fontFamily={'Fira Code'}>Fira Code</Txt>

Loading fonts from local

For local fonts, make a directory fonts and put your font inside it.


root
└─public
+ └─fonts *
+   └─CASCADIACODE.TTF

Inside global.css, import the font using @font-face.


@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
@font-face {
  font-family: 'Cascadia Code';
  src:
    local('Cascadia Code'),
    url(public/fonts/CASCADIACODE.TTF) format('truetype');
}

Notice the name of the font will match the string in @font-face/font-family from the css.


<Layout direction={'column'} alignItems={'center'} layout>
  <Txt fontFamily={'Fira Code'}>Fira Code</Txt>
  <Txt fontFamily={'Cascadia Code'}>Cascadia Code</Txt>
</Layout>