Jump to content
Search Community

SplitText and fonts

Monops test
Moderator Tag

Go to solution Solved by Monops,

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

Hello!

 

I noticed that if I use SplitText on a div containing text, and that div has a class defining a font, than Splittext will fail in creating the lines array, making an array of lines that is pretty much wrong: the lines are always too long or too short, never correct.

 

I've made a small example in codepen up there: can you tell me if I'm doing something wrong?

 

Cheers!

Alex

See the Pen QwyYNL by anon (@anon) on CodePen

Link to comment
Share on other sites

it appears you are not waiting for the font to load. I added a simple delay and it worked fine. jQuery's ready does not wait for fonts to load and be applied.

 

TweenLite.delayedCall(1, split)
function split(){
var split = new SplitText("#content", {type:"lines"});
}
 
It works fine. I deleted your zip as we do not want folks sharing the members only files.
Feel free to continue to use the CodePen demos, I didn't see anything in your test that wouldn't work on CodePen.
 
Thanks
  • Like 1
Link to comment
Share on other sites

Thanks!

 

I tried your fix and works, but it's a little arbitrary :) I cannot use the google font library as it works for the web fonts, while in my case I only deal with local fonts.

$(window).on("load", handler) does not work as well. do you have a better solution? :)

Link to comment
Share on other sites

Awesome. Yeah, and just so you know, I agree that it does seem strange that even locally you need to wait for the font to get loaded and rendered.

But the problem is that SplitText is taking its measurements before the custom font gets displayed.

 

If you take SplitText out of the picture completely and use jQuery's width() to get the width of a <span> with your custom font you will often get messed up measurements too. Using font loader is the way to go.

 

Also, for you and anyone else that needs a nice reference, this pen pretty much shows all the different events and capabilities of Google WebFont Loader:

http://codepen.io/GreenSock/pen/tnADg

  • Like 3
Link to comment
Share on other sites

Hello Monops,

 

To add to Carl's and Rodrigo's great advise, I am late as usual:

 

Like Carl said, the jQuery ready() wont wait for web fonts to be loaded. So you could add your window.load inside your jQuery ready(). Sometimes the window loads before the DOM is ready. So you can make sure the DOM is ready before checking the window.load event. If the window load event is fired before the ready() event, then the window.load event will fire immediately after the jQuery ready(). So this way you make sure the DOM Is always ready before the window.load is fired. Making sure images, links and web fonts are fully loaded:

 

This is what i usually do when dealing with making sure my assets are fully loaded and ready before trying to animate them.

:

// fire when DOM is fully loaded
$(document).ready(function(){

        // fire when window is loaded (images, links, fonts, etc..)
        // this fires immediately if the window loaded before the DOM was ready for some reason
        // you could also use native javascript window.load function as well instead of jQuery load event
        $(window).on("load", function(){

                  // code goes here

        });

});

:

But Carl's solution of using the Google Web Font Loader is spot on!

 

I hope this helps :)

Link to comment
Share on other sites

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...