Font

The SDK supports displaying custom fonts and different styles on the canvas, giving you complete control over the typography in your projects.

By default, no fonts are loaded, so you can work with the browser's default fonts. But if you want to bring in your own custom fonts, you can do so.

Importing Fonts

You can import a font by specifying the URL to the font face or providing a CSS entry point with all the styles set up. Here's an example:

engine
  .getFontRegistry()
  .loadFromCssUrl(
    "Roboto",
    "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  );

Once you've imported a font, you can apply the font family to your Text Clips:

textClip.style.setFontFamily("Roboto");

Retrieving Existing Fonts

Need to see what fonts are currently available? You can easily retrieve the list of existing fonts using this method:

const fonts = engine.getFontRegistry().fonts;

Animation Events