# Lottie letter spacing react problem

**URL:** <https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715>\
**Category:** Uncategorized\
**Created:** [December 6, 2022, 12:28am UTC](https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715 "2022-12-06T00:28:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gfxargentina](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/gfxargentina/32/2558_2.png) [@gfxargentina](https://forum.lottiefiles.com/u/gfxargentina)\
**Post date:** [December 6, 2022, 12:28am UTC](https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715/1 "2022-12-06T00:28:17Z")

</div>

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

> **[letter-1](https://ibb.co/k5d6dRX)**
>
> Image letter-1 hosted in ImgBB

and this is how looks in lottie player

 ![letter-1a](https://canada1.discourse-cdn.com/flex030/uploads/lottiefiles/original/2X/8/8434920bbf3ef5c5c57f9243ca7b0ebe871cba74.png)

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](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

---

<div class="post-metadata">

**Author:** ![bart](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/bart/32/2832_2.png) [@bart](https://forum.lottiefiles.com/u/bart)\
**Post date:** [December 13, 2022, 4:36pm UTC](https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715/2 "2022-12-13T16:36:28Z")

</div>

Try converting the text to a shape layer

---

<div class="post-metadata">

**Author:** ![gfxargentina](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/gfxargentina/32/2558_2.png) [@gfxargentina](https://forum.lottiefiles.com/u/gfxargentina)\
**Post date:** [December 16, 2022, 3:19pm UTC](https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715/3 "2022-12-16T15:19:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gfxargentina](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/gfxargentina/32/2558_2.png) [@gfxargentina](https://forum.lottiefiles.com/u/gfxargentina)\
**Post date:** [January 17, 2023, 12:26am UTC](https://forum.lottiefiles.com/t/lottie-letter-spacing-react-problem/3715/4 "2023-01-17T00:26:37Z")

</div>

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.

> <https://github.com/airbnb/lottie-web/issues/2892>
>
> \*\*Tell us about your environment\*\*
> i use nextjs with @lottiefiles/react-lottie-…player
> 
> \* \*\*Browser and Browser Version:\*\*\*
> it happens in every browser
> 
> \* \*\*After Effects Version:\*\*\* 
> After Effects 2022.6.0 with bodymovin 5.9(in options i use font class)
> 
> \* \*\*Nextjs\*\*\* 
> i use google font link in global styles
> 
> i have problem with text tracking when i render the json in nextjs
> 
> this is how text look in AE, the text tracking is ok
> !\[This is an image\](https://i.ibb.co/s1jFX9X/text-tracking-1.png)
> 
> and this is how is look when i render the json with netxjs
> !\[This is an image\](https://i.ibb.co/FXbx8FB/text-tracking-2.png)
> 
> 
> .my-font {
> font-family: ‘Roboto’, sans-serif;
> letter-spacing: -1px; 
> }
> 
> letter-spacing not fix the problem, I would appreciate it if anyone could tell me where the problem could be, bodymovin is awesome, thank you very much