Skip to main content

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/
  ├─motion-canvas.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 '@motion-canvas/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>