Lottie letter spacing react problem

1

hi, i have this problem when i render to json with bodymovin in after effects, this how the text looks in after effect, the letter spacing are ok

and this is how looks in lottie player

letter-1a
letter-1a490×843 121 KB

it have spaces between letters, i use nextjs and import the font in global styles:

@import url(‘https://fonts.googleapis.com/css2?family=Lobster&display=swap’);

.my-font {
font-family: ‘Lobster’, cursive;
/* letter-spacing: -1px; */
}

letter-spacing not fix the problem, could someone tell me what I am doing wrong or tell me if there is a way to solve this? thank you very much

2

Try converting the text to a shape layer

1 Like
3

hi, thanks for your response, i can´t convert to shapes, the texts is dynamic edited

4

SOLUTION: this is probably related to the font not being loaded when the animation starts. Lottie tries to detect that and wait for the font to be loaded.
I think that if you remove the “cursive” option from the css selector, it might fix it.

If that doesn’t work, another option is to load an html element with the css class applied to it so the font loads before the animation.

thanks to the great help of bodymovin creator, you can see the issue he helpme fix the problem i had.