# Working with Text and Fonts
Create and style text layers, query available fonts, and respond to font asset changes.

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.

```typescript
const fonts = await creator.getAvailableFonts();

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

Each entry is a [FontFamily](/en/creator-api/values/font-family) 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:

```typescript
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:

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

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

```typescript
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:

```typescript
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:

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

The payload is an array of [FontAsset](/en/creator-api/types/font-asset) — each one exposes the `font` (family + style) it provides.