Dynamic text tracking problem in nextjs

[gfxargentina]

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

and this is how is look when i render the json with netxjs

.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

[gfxargentina]

the problem is the google font, i disable the google font styles, and the text default font is ok, i think is somenthing when the font is loaded, it doesn't load well then it shows wrong text tracking, can someone tell me a possible solution for this?

[bodymovin]

I'm guessing that the font is not loaded when the animation starts. Have you tried, as a test, making sure to load the animation once the font is fully loaded?

[oguz3]

I'm guessing that the font is not loaded when the animation starts. Have you tried, as a test, making sure to load the animation once the font is fully loaded?

I have the same problem. This did not solve my problem

[gfxargentina]

hi @bodymovin thanks for your response, i try self-host fonts in NextJS, i follow this tutorial , i also try preload the font with

<link
          rel="preload"
          href="/fonts/FrederickatheGreat-Regular.ttf'"
          as="font"
          type="font/ttf"
          crossorigin
        />

but don´t work, i have the same problem, can you put me in the right direction on where i can find information on how to make the font load before the animation?

[bodymovin]

@gfxargentina can you share a link to check it out?

[gfxargentina]

hi @bodymovin sorry forthe late response, here is the link to the After Effects Project File: https://drive.google.com/file/d/1h8zmNTWTJDNSxPtQ7f0ttH5sQL-kgGeU/view?usp=share_link , also i invited you to my repo, in the repo the file [name].js, is where the json is show, the file controller is where the json is created, please let me know if you need anything else.

[bodymovin]

@gfxargentina do you have a url where this is deployed?

[gfxargentina]

@bodymovin yes, here https://tarjetas-animadas.vercel.app/

[bodymovin]

@gfxargentina can you share a link directly to the animation or details of how to get to it?

[gfxargentina]

@bodymovin, yes here: https://tarjetas-animadas.vercel.app/video/url?preview=https://aws-tarjetas.s3.amazonaws.com/djluischilo.json

[bodymovin]

@gfxargentina it looks like the url has a tilde that is preventing the font to be preloaded correctly. If you check the network on the chrome dev tools you'll notice it is not getting loaded

[gfxargentina]

@bodymovin yes you are right, i don´t see that tilde, i delete the tilde, check network, but still don´t work

[bodymovin]

@gfxargentina 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. As a test, can you try adding an html element with the classapplied and delay the loading of the animation for 1 second?

[gfxargentina]

@bodymovin problem solved, i load the lottie player in a div with the classname of the font, and now work, you can now close this issue, thank you very much for your help

[Nobunaji]

@bodymovin @gfxargentina Hi, sorry for the ping but you guys haven't been here for a while, I have the same problem and i followed what you guys wrote. Applying the font to the div using font-family does work but only after I reload the page.

• Environment I am not using NextJS or any framework for that matter, I'm just using plain old HTML.

• Browsers : Even worse is that the problem is worse in chrome. Reloading doesn't even work. Meanwhile in Firefox it does what i described above.

• How to reproduce : As an attachment you will find my HTML file. Open it using a browser. What you should observe is the animation loading incorrectly (with wrong letter spacing). Reload the page and it will have the correct spacing.

Any idea on how to fix this ?

animation_text.zip

[bodymovin]

@Nobunaji I just tested the html you shared in Chrome and I see the font correctly. Is it working for you when you run it locally?