[SplitText and ScrollTrigger do not always produce the same result]

Seems like the font is not loaded early enough.

Because wrapping the GSAP code with `

document.fonts.ready.then(() => {[...]})

`

seems to do the trick.

 

But now on the first time visiting the page, the text flashes, before the font is loaded.

Is there any way to prefetch the font, so that the first rendering is always happening with that font?

I looked up all the possible `rel` attributes for the HTML link tag, but none seem to fit this (https://3perf.com/blog/link-rels/)

[SplitText and ScrollTrigger do not always produce the same result]

Demo: https://codesandbox.io/s/youthful-glitter-wrwi0l

Make sure your browser is at least 635px wide, so that it has no horizontal scrollbars.

 

This how it looks, when you open it on the first time or in a incognito tab (not displayed correctly):

 

After a browser refresh in Codesandbox, it will be displayed correctly:

 

What could cause this behaviour?