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
                                >