Text

Font List

Fonts are defined in the animation object, under fonts.

When fonts is present in the Animation object, it has a single attribute called list, which is an array of font objects:

To understand how to load fonts it's better to look at some examples so here follow various ways of adding a font into lottie. The tables show the JSON, its resulting output, then an equivalent font definition using CSS.

Using a system font

Here we use origin 0 (and we can omit it).

fFamily needs to be an available font family.

{
    "fFamily": "monospace",
    "fName": "MyFont",
    "fStyle": "Regular"
}

{
    font-family: monospace;
}

Font from CSS URL

Here we use origin 1.

{
    "fPath": "https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap",
    "fFamily": "Poppins",
    "fStyle": "Bold",
    "fName": "Poppins Bold",
    "origin": 1
}

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&amp;display=swap" rel="stylesheet">

Font from URL

Here we use origin 3.

{
    "fPath": "https://fonts.gstatic.com/s/ubuntu/v15/4iCp6KVjbNBYlgoKejZftWyI.ttf",
    "fFamily": "Ubuntu",
    "fStyle": "Light Italic",
    "fName": "Ubuntu Light Italic",
    "origin": 3
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCp6KVjbNBYlgoKejZftWyI.ttf) format('truetype');
}

Character Data

You can also have font data directly into the lottie, this is done by having an array of character data objects in the chars attribute of the animation.

Character Shapes

Defines a character as shapes

Character Precomp

Defines a character as a precomp layer

Text Layer

The text layer has an attribute called t containing a Text Animator Data object.

Text Data

Contains all the text data and animation

Animated Text Document

This object is similar to an animated property for text.

The main difference is that it's always treated as animated (ie: you must use keyframes).

Text Document Keyframe

This is similar to the keyframe object used by animated properties, but it doesn't have any attribute specifying interpolation as text is always animated in discrete steps.

Text Document

This is where the actual text data is stored.

Text Alignment Options

Used to change the origin point for transformations, such as Rotation, that may be applied to the text string. The origin point for each character, word, or line can be changed.

Text Follow Path

Uses the path described by a layer mask to put the text on said path.

Text Range

Range of text with custom animations and style

Text Range Selector

Defines the range of characters to apply a property value only to a specific subset of the text document.

r Defines whether the values are defined as a percentage or indices.

The range is defined by s, e, and o.

ne and xe define what happes to text that is only partly inside the selected range.

b changes whether selection is done on per character basis, per word, etc. It also changes the meaning of an index when r is set to Indices.

Text Style

Has the properties of a transform and the style options of a text document.

It applies such transform and style to the part of the text defined by the text selector property