SplitText lines are not splitting properly

[Alphamark]

I'm creating a website in webflow and I have a split text animation, and sometimes this happens on mobile.

I think I found out what the problem is — splitText splits the lines before the font is loaded (when the text is smaller), I inserted the font locally, and now it happens only sometimes, not all the time. But it still happens, so can someone help me and tell me if is there a workaround for this?

[mvaneijgen]

Yeah, deffiently wait until the font is fully loaded before you run the SplitText code something like https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/loading_event Hope it helps and happy tweening! 

[Alphamark]

@mvaneijgen Thanks a lot mate! That helped.

I used the onloadingdone event, which waits for the font to finish loading. The code is down below if someone has the same problem.

document.fonts.onloadingdone = () => {
  splittext_code_goes_here;
};

(async () => {
  await document.fonts.load("16px YOUR_FONT");
})();

 

Update:

For some reason, the event doesn't work on iOS.

Update 2:
I don't know why the code above doesn't work on iOS even if it has support for it. I found this code instead to work fine on iOS and other devices as well.

async function isReady() {
  let ready = await document.fonts.ready;
  console.log(ready);
}

isReady()

Edited May 21 by Alphamark
Code updated

[Rodrigo]

Hey thanks for reporting back and sharing your solution with the community 💚

 

Your solution is basically the asyn/await version of this:

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts#doing_operation_after_fonts_are_loaded

 

Happy Tweening!