External font rendering, width not calculated properly

[wheat mantle]

I'm rendering a font from an external url, with:

loadFont({
family: name,
url: file,
weight: String(weight),
style,
display,
format
})

But it doesn't calculate the weight properly. According to the docs there is no need to use delayRender for loadFont.
The problems goes away when the component is rerendered.

Anyone an idea?

[wheat mantle]

As Jonny suggested in #1302526681520672831 message I added an delayRender, which does work for Web. But the mp4 render is still not correct

[fiery lantern]

answered in the other channel

[wheat mantle]

Thanks! 🙏

Sorry, stupid me, I ment width 🤦‍♂️

I am still debugging, and I think it's an issue in combination with <Lottie..
The Lottie renders the text. When I delay the lottie rendering for 100ms, it all renders fine.
I now use:
Promise.all(
fonts.map((font) => {
const result = loadCustomFont(font, backendUrl)
return result?.waitUntilDone ? result.waitUntilDone() : Promise.resolve()
})
)
.then(() => {
continueRender(handle)
showLottieWithDelay()
})

The showLottieWithDelay, sets a state after 100ms, and then
{showLottie && <Lottie

Is painted.

I doubt it is the rights solution

It does work, for the web render and the mp4.
Only downside: a little flickering web experience, and a blanc screen of the start of the mp4 render

[wheat mantle]

Discovered that I did not need the delay after all, but I did needed a setTimeout to be on the next render tick somehow

[wheat mantle]

Still fighting with this, on localhost it ran fine, now production still has the issue. It's something timing wise, but can't figure out what it is.

[wheat mantle]

I think I managed it after all

[fiery lantern]

just catching up now! 🙂 sorry for the absense, had a few sick days 😪
did you manage to resolve it now? how about https://github.com/remotion-dev/remotion/issues/5984, is it resolved as well?

[wheat mantle]

Good to hear your back and healthy again! 💪

I did resolve the issue on the web render.

It was a timing thing, I rendered the <Lottie element too quickly, the dynamic data was not yet calculated yet, and somehow in combination with the font load it caused the wrong widths of the font.
Now waiting for both data and fontload, and that did the trick

The rendering issue https://github.com/remotion-dev/remotion/issues/5984 is a different one, but I am close too. It had to do with the docker setup. Is there some ideal setup somehwere? Our container for the renderer was missing some libs which could improve the font rendering. It already improved by adding those, but still dont know what the best setup is.

[fiery lantern]

consider using a high order component that does not render any children until the font is loaded. that way you prevent any layout calculations being done in the child nodes and then the layout changes. example here: https://www.remotion.dev/docs/layout-utils/best-practices#example-with-high-order-component

[fiery lantern]

yes, we have documented that here! https://www.remotion.dev/docs/docker

[wheat mantle]

Thanks Jonny! I will have a closer looks as soon as I work on the project.
Thanks for responding!

[wheat mantle]

high-order component did the trick! Thanks for pointing that out!

[fiery lantern]

nice! thanks for reporting back and closing the issue. we need to highlight that more in the docs!

[wheat mantle]

It did solve the font issue, but it introduced some sort of extreme flickering 🤔
I can pinpoint the issue to that exact commit (high order comp)
looking into that now 🙂

[wheat mantle]

Sorry my bad! Didnt followed the docs properly, works like a charm now!

[fiery lantern]

nice! no we also need to do a better job in the docs 🙂