---
title: "Text and fonts"
description: "Create text, choose its font and animate its letters, words or lines."
canonical: "https://terminal.lottiefiles.com/docs/layers/text/"
last_updated: 2026-10-29
---

# Text and fonts

Create text, choose its font and animate its letters, words or lines.

[All layer types](https://terminal.lottiefiles.com/docs/layers.md) · [Editing on the stage](https://terminal.lottiefiles.com/docs/editing.md)

## Text

Press `⇧T`, then click on the stage for a line, or drag a box for text that wraps.

Type, `enter` for a new line, `esc` when done. Double-click text to type into it.
The **TEXT** section in the rail (the Properties panel in After Effects or Figma) sets the words and their appearance. Its controls are listed
below.

**Path** bends a line of text along an arc, dip or wave. Drag its diamond to change the
starting margin; **travel** animates that margin. **edit** opens its path points.

The file carries the letters its text draws, so it looks the same in every player without the
font. A document saved as `.lottie` also carries the fonts themselves, where their makers
allow it. An export carries them only with **Glyphs + fonts** selected (or `--fonts` from the
command line); **Glyphs** is the default.

## Animate text

**Animate** brings the letters on, one after another:

| Look | The letters |
|---|---|
| **fade** | Fade in |
| **rise**, **drop** | Rise into place, or fall in and settle |
| **pop** | Grow from nothing, past their size and back |
| **typewriter** | Appear at once, as typed |
| **wave** | Rise and fall in turn until the layer ends |
| **count** | Counts the number in the text from 0 over one second, keeping currency signs and commas |

Each look is a starting point: it sets Animate text's values, which you then change in the
rail. Choosing another replaces those values. Every player draws Animate text.

- **Move**, **Scale**, **Turn** and **Fade** are where each letter starts from. **Start** is when
  the first begins, **Delay** the frames between letters, **Duration** the frames each takes.
  Drag, type or key them with **◆**. Keyed, Move, Scale, Turn or Fade is a motion each letter
  plays in turn.
- **By** moves letters, words or lines; **Order** goes first to last, last to first, from the
  centre, or at random (by **Seed**); **Ends** plays once, or loops or ping-pongs until the
  layer ends. **shape it** opens the ease box for how each one moves.
- **Only** **some** unfolds **Only some** to move just a range, counted from 1 (0 is the last):
  to lift one word, or bring in the last line alone.
- With the text selected, in terminals that show pictures, a bar under each letter, word or
  line it moves shows how far it is from its place at the playhead.
- **✕** takes it off and leaves the animators it wrote, to edit or remove.
- With several text layers selected, **copy Animate text to the others** in **LAYERS** gives
  each the first one's values, in one undo step.

**Animator** rows describe the text's other animators from the file. One simple enough to be
an Animate text has **edit**, which makes it one; the rest keep playing as they are.

## Fonts

`⌃F` (or click the font's name in the rail) lists the fonts, found as you type ("grotesk", "mono
bold"): the document's first, then the built-in ones (Public Sans, DM Sans, Inter Display,
JetBrains Mono, Nunito), those fetched before, and the computer's.

- `↑` `↓` try each one on the selected text, `enter` keeps it, `esc` puts back what was.
- A family that isn't here comes from Google Fonts (the last row).
- A document whose font isn't here fetches it from Google Fonts when it opens; until then the rail
  names it in red, `not here`.

## TEXT controls

The rail (the Properties panel in After Effects or Figma) can scroll. Use **↓ more** or scroll
over it to reach **TEXT** and the controls below it.

| Row | Use |
| --- | --- |
| **Says** | Edit the words; click the label to bind them to a text token |
| **Font** | Open the font picker, or step between fonts with **◂** and **▸** |
| **Size** | Letter size in pixels |
| **Tracking** | Space between letters |
| **Leading** | Distance between lines in pixels |
| **Align** | **left**, **centre**, **right**; **AA** turns on capitals |
| **Colour** | Open the picker or type a hex colour |
| **Animate** | **fade**, **rise**, **drop**, **pop**, **typewriter**, **wave**, **count** |
| **Effect** | Describes the current Animate text; **✕** removes its controls and leaves its animators |
| **By** | **letter**, **word**, **line** |
| **Order** | **first to last**, **last to first**, **from the centre**, **random** |
| **Ends** | **once**, **loop**, **ping-pong** |
| **Only** | **all** or **some**; **some** exposes the first and last unit |
| **Ease** | **shape it** opens the ease box |
| **Animator** | Describes an imported animator; **edit** converts one that fits to Animate text; **✕** removes it |
| **Path** | **off**, **arc**, **dip**, **wave**; **edit** changes its points |
| **Margin** | Starting distance along the path in pixels; **travel** animates it |

Animate text's numeric rows are **Move** (x and y in pixels), **Scale** (percent), **Turn**
(degrees), **Fade** (percent), **Start**, **Delay**, **Duration** (frames), **Seed** and
**Only some**. **Only some** counts from 1; an end value of 0 means the last unit.

![Animate text set to move words, with its order and ending controls visible](https://terminal.lottiefiles.com/docs/assets/shots/draw-text-controls.png)

Watch: [Animate text](https://terminal.lottiefiles.com/animate-text/).