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

+ └─global.css

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

@import url(';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.

+ └─fonts *

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

@import url(';700&display=swap');

@font-face {
font-family: 'Cascadia Code';
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>