Working with Text and Fonts

Create text layers, set their font and styling, and react when the user uploads new font assets.

Discovering available fonts

Call creator.getAvailableFonts() to list every font family currently available in the project — Creator presets, Google Fonts, the user's locally-installed fonts, and font assets uploaded to the project.

const fonts = await creator.getAvailableFonts();

console.log("available fonts", fonts);

Each entry is a FontFamily with a family name, a list of available styles, a defaultStyle, and a source indicating where the font came from ("PRESET", "GOOGLE_FONT", "LOCAL", or "ASSET").

Note that if the user hasn't given Lottie Creator permission to access local fonts, you will not be able to access "LOCAL" fonts.

Creating a styled text layer

Pass optional styling properties when creating a text layer:

const layer = creator.activeScene.createTextLayer({
  text: "Hello, Creator",
  fontFamily: "Inter",
  fontStyle: "Bold",
  fontSize: 48,
  alignment: "center",
  fill: { type: "SOLID", color: { r: 255, g: 0, b: 128 } },
});

Updating text styling

Each styling property is settable after creation:

layer.fontFamily = "Roboto";
layer.fontStyle = "Italic";
layer.fontSize = 72;
layer.alignment = "right";

Use createFill() and createStroke() to add or replace the fill and stroke.

layer.createFill({ type: "SOLID", color: { r: 0, g: 0, b: 0 } });

layer.createStroke({
  fill: { type: "SOLID", color: { r: 255, g: 255, b: 255 } },
  width: 2,
});

To remove a stroke, call .remove() on it:

layer.stroke?.remove();

Reacting to font asset uploads

When a user uploads or removes a font asset, Creator fires a change:fonts event. Listen for it to refresh font pickers or update layers in real time:

creator.on("change:fonts", (assets) => {
  console.log(
    "Font assets changed:",
    assets.map((a) => a.font.family)
  );
});

The payload is an array of FontAsset — each one exposes the font (family + style) it provides.