Split text before font render issue

[ryanpwaldon 2 Likes (Newbie)]

Hey guys,

 

Hoping someone can help me out.

 

My Problem: Split text is being applied before my font has actually rendered in the browser which results in abnormally large letter spacing. My assumption is the fallback font is being used for the split text calculation prior to my imported fonts being rendered in the browser (thus, when my fonts are rendered, they're not formatted correctly). I'm 90% sure this is the cause of my issue, although let me know me if otherwise! The issue occurs about 50% of the time (the other 50% renders as expected) and at the moment it's only happening on IOS Safari / Chrome (so far from what I've tested) which makes it hard to debug. I've also tested and found this problem occurs more frequently when my font loads slower than usual. The problematic font is loaded from AWS, although I've also had the same problem loading fonts from Google. 

I've seen questions regarding this issue thrown around a few times, although I couldn't seem to find a robust / official solution (mostly hacks or the use of the Webfontloader (https://github.com/typekit/webfontloader) which looks great, but I can't seem to get working). 

 

Here's an example of what I'm seeing: 

 

Good:

 

Bad:

Has anyone got this figured out?

Thanks guys!
Ryan

[GreenSock 8,117 Likes (Superhero)]

It certainly sounds like you've diagnosed it well. I share your suspicions about the delayed font loading being the issue. I don't have time to research it in depth now, but if I were you I'd be looking for ways to listen for an event that's triggered when the font has loaded and rendered, and THEN do the SplitText thing. Maybe even have visibility:hidden until things are loaded (so you don't get that flash of unstyled text). 

 

I assume you've got the SplitText stuff as far down on the page as possible (like, in the source code I mean), right? 

[ryanpwaldon 2 Likes (Newbie)]

Thanks for the advice, Jack!

Glad to say I figured out a solution this morning. I used font face observer (https://github.com/bramstein/fontfaceobserver) which is a library that allows you to fire a callback once particular fonts have been loaded (and it probably does some other things). Web font loader is an alternative to this, although it's a heavier library (and as mentioned above, I couldn't get this working anyway).

Still a bit puzzled as I use split text all the time and haven't come across this issue before. Anyway, this looks to be a pretty solid solution should anyone else happen to come across this

[GreenSock 8,117 Likes (Superhero)]

Excellent, thanks for sharing the solution. 

 

Happy tweening!