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:

Attribute	Type	Title	Description
`ascent`	`number`	Ascent	Text will be moved down based on this value
`fFamily`	`string`	Font Family	Font Family
`fName`	`string`	Name	Name used by text documents to reference this font, usually it's `fFamily` followed by `fStyle`
`fStyle`	`string`	Font Style	Font Style
`fPath`	`string`	Path	Path
`fWeight`	`string`	Weight	Weight
`origin`	Font Path Origin	Origin	Origin
`fClass`	`string`	CSS Class	CSS Class applied to text objects using this font

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.

JSON Lottie Output

JSON	Lottie Output
`{ "fFamily": "monospace", "fName": "MyFont", "fStyle": "Regular" }`	{lottie:font-local.json:300:100}
CSS	Output
`{ font-family: monospace; }`	Hello

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

{lottie:font-local.json:300:100}

CSS Output

{
    font-family: monospace;
}

Hello

Font from CSS URL

Here we use origin 1.

JSON Lottie Output

JSON	Lottie Output
`{ "fPath": "https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap", "fFamily": "Poppins", "fStyle": "Bold", "fName": "Poppins Bold", "origin": 1 }`	{lottie:font-css.json:300:100}
CSS	Output
`@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');` or `<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">`	Hello

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

{lottie:font-css.json:300:100}

CSS Output

 @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">

Hello

Font from URL

Here we use origin 3.

JSON Lottie Output

JSON	Lottie Output
`{ "fPath": "https://fonts.gstatic.com/s/ubuntu/v15/4iCp6KVjbNBYlgoKejZftWyI.ttf", "fFamily": "Ubuntu", "fStyle": "Light Italic", "fName": "Ubuntu Light Italic", "origin": 3 }`	{lottie:font-url.json:300:100}
CSS	Output
`@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'); }`	Hello

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

{lottie:font-url.json:300:100}

CSS Output

@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');
}

Hello

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.

Attribute	Type	Title	Description
`ch`	`string`	Character	Character
`fFamily`	`string`	Font Family	Font Family
`size`	`number`	Font Size	Font Size
`style`	`string`	Font Style	Font Style
`w`	`number`	Width	Width
`data`	Character Shape or Character Precomp	Data	Data

Character Shapes

Defines a character as shapes

Attribute	Type	Title	Description
`shapes`	`array` of Graphic Element	Shapes	Shapes forming the character

Character Precomp

Defines a character as a precomp layer

Attribute	Type	Title	Description
`refId`	`string`	Reference Id	ID of the precomp as specified in the assets
`ks`	Transform	Transform	Layer transform
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`sr`	`number`	Time Stretch	Time Stretch
`st`	`number`	Start Time	Start Time

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

Attribute	Type	Title	Description
`a`	`array` of Text Range	Ranges	Ranges
`d`	Animated Text Document	Document	Document
`m`	Text Alignment Options	Alignment	Alignment
`p`	Text Follow Path	Follow Path	Follow Path

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).

Attribute	Type	Title	Description
`k`	`array` of Text Document Keyframe	Keyframes	Keyframes
`x`	`string`	Expression	Expression
`sid`	`string`	Slot ID	One of the ID in the file's slots

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.

Attribute	Type	Title	Description
`s`	Text Document	Start	Start
`t`	`number`	Time	Time

Text Document

This is where the actual text data is stored.

Attribute	Type	Title	Description
`f`	`string`	Font Family	Font Family
`fc`	Color	Fill Color	Fill Color
`sc`	Color	Stroke Color	Stroke Color
`sw`	`number`	Stroke Width	Stroke Width
`of`	`boolean`	Stroke Over Fill	Render stroke above the fill
`s`	`number`	Font Size	Font Size
`lh`	`number`	Line Height	Distance between lines on multiline or wrapped text
`sz`	`array` of `number`	Wrap Size	Size of the box containing the text
`ps`	`array` of `number`	Wrap Position	Position of the box containing the text
`t`	`string`	Text	Text, note that newlines are encoded with \r
`j`	Text Justify	Justify	Justify
`ca`	Text Caps	Text Caps	Text Caps
`tr`	`number`	Tracking	Text Tracking
`ls`	`number`	Baseline Shift	Baseline Shift

Text
Color Red	0
Color Green	0
Color Blue	0
Stroke Width	0
Stroke Red	0
Stroke Green	0
Stroke Blue	0
Position X	5
Position Y	80
Font Size	100
Justify

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.

Attribute	Type	Title	Description
`a`	Vector	Alignment	Group alignment
`g`	Text Grouping	Grouping	Anchor point grouping

Text Follow Path

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

Attribute	Type	Title	Description
`m`	`integer`	Mask	Index of the mask to use
`f`	Scalar	First Margin	First Margin
`l`	Scalar	Last Margin	Last Margin
`r`	Scalar	Reverse Path	Reverse Path
`a`	Scalar	Force Alignment	Force Alignment
`p`	Scalar	Perpendicular To Path	Perpendicular To Path

Text Range

Range of text with custom animations and style

Attribute	Type	Title	Description
`nm`	`string`	Name	Name
`s`	Text Range Selector	Selector	Selector
`a`	Text Style	Style	Style

Text
Hello World the quick brown fox jumps over the lazy dog Selector
Start	60
End	75
Offset	0
Min Ease	0
Max Ease	0
Randomize
Range Units
Based On
Shape
Position X	0
Position Y	0
Rotation	0
Opacity	Style 100
Fill
Fill Hue	0
Fill Saturation	0
Fill Brightness	0
Stroke
Stroke Width	0
Letter Spacing	0

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.

Attribute	Type	Title	Description
`t`	0-1 `integer`	Expressible	Expressible
`xe`	Scalar	Max Ease	Max Ease
`ne`	Scalar	Min Ease	Min Ease
`a`	Scalar	Max Amount	Max Amount
`b`	Text Based	Based On	Based On
`rn`	0-1 `integer`	Randomize	Randomize
`sh`	Text Shape	Shape	Shape
`o`	Scalar	Offset	Offset
`r`	Text Range Units	Range Units	Range Units
`sm`	Scalar	Selector Smoothness	Selector Smoothness
`s`	Scalar	Start	Start
`e`	Scalar	End	End

Start	60
End	75
Offset	0
Min Ease	0
Max Ease	0
Randomize
Range Units
Based On
Shape

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

Composition Diagram for Text Style

Attribute	Type	Title	Description
`a`	Position	Anchor Point	Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)
`p`	Splittable Position	Position	Position / Translation
`r`	Scalar	Rotation	Rotation in degrees, clockwise
`s`	Vector	Scale	Scale factor, `[100, 100]` for no scaling
`o`	Scalar	Opacity	Opacity
`sk`	Scalar	Skew	Skew amount as an angle in degrees
`sa`	Scalar	Skew Axis	Direction along which skew is applied, in degrees (`0` skews along the X axis, `90` along the Y axis)
`rx`	Scalar	X Rotation	Split rotation component
`ry`	Scalar	Y Rotation	Split rotation component
`rz`	Scalar	Z Rotation	Split rotation component, equivalent to `r` when not split
`or`	Vector	Orientation	Orientation
`sw`	Scalar	Stroke Width	Stroke Width
`sc`	Color	Stroke Color	Stroke Color
`sh`	Scalar	Stroke Hue	Stroke Hue
`ss`	Scalar	Stroke Saturation	Stroke Saturation
`sb`	Scalar	Stroke Brightness	Stroke Brightness
`so`	Scalar	Stroke Opacity	Stroke Opacity
`fc`	Color	Fill Color	Fill Color
`fh`	Scalar	Fill Hue	Fill Hue
`fs`	Scalar	Fill Saturation	Fill Saturation
`fb`	Scalar	Fill Brightness	Fill Brightness
`fo`	Scalar	Fill Opacity	Fill Opacity
`t`	Scalar	Letter Spacing	Letter Spacing
`bl`	Scalar	Blur	Blur
`ls`	Scalar	Line Spacing	Line Spacing

Position X	0
Position Y	0
Rotation	0
Opacity	Style 100
Fill
Fill Hue	0
Fill Saturation	0
Fill Brightness	0
Stroke
Stroke Width	0
Letter Spacing	0

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search