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>