Jump to content
Search Community

Split text before font render issue

ryanpwaldon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:
59a411a7570c3_ScreenShot2017-08-28at10_49_43pm.png.4594d8da23de3fc5d9a42f85ba6c0e89.png

 

Bad:

59a4121282945_ScreenShot2017-08-28at10_49_29pm.png.3235fa0cee5e82c16ceb562f48b4e4be.png


Has anyone got this figured out?

Thanks guys!
Ryan

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

I know this topic is old but I too was having a font rendering issue when using custom fonts. My GSAP code was firing/rendering before my fonts were fully loaded, which caused my splttext to render incorrectly.

 

I'm still testing the solution I found but so far it seems to be working.

Here is the solution:

function init(){
  // my GSAP code
} 

window.addEventListener('load', function(){
    init();
});

I discovered this by watching ihatetomates's (Petr Tichy) GSAP tutorials. Right now I've wrapped almost all of my GSAP code in this.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...