SplitText lines breaking

[Stefano Monteiro]

Hi, Need a little help here to understand why this is happening. I tried to replicate the same thing on codepen but there it worked as expected. So allow me to paste the link to the full project as well here.

The issue is,  as you can see on the screenshot,  the last two paragraphs not working well with splitText. They have double lines, with one word on the second.

 

 

 

See the Pen ExZGZbe by stefanomonteiro (@stefanomonteiro) on CodePen

[GreenSock]

My best guess would be that you split the text BEFORE the font loaded, thus all the sizing/spacing shifted once the font loaded. Make sure you wait for your fonts to finish loading and rendering before you split the text. 

[Stefano Monteiro]

I think you are right. When blocking the font url in dev tools it works. Now I am thinking how to run the script after font load.

[GreenSock]

I'd follow the advice here: https://stackoverflow.com/questions/6677181/how-to-know-when-font-face-has-been-applied

 

And listen for readyState to be "complete". 

 

Other potentially helpful links: 

• https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded
• https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/