Typekit & SplitText

[anteksiler]

Since Typekit asynchronously loads the fonts, the fonts change midway during the Splittext animation, causing unexpected line-breaks.

 

How can we wait for the typekit font loading and then run the animation?

 

https://werkstatt.fuelthemes.net/werkstatt-text-style/portfolio/the-deer-hunter/

 

 

See the Pen france-cisco by werkstatt-personal (@werkstatt-personal) on CodePen

[Jonathan]

Hello anteksiler,

 

This looks like a TypeKit issue on the way its loading into your page via async:

• Are you waiting until the DOM and window is fully loaded before running your animation?
   
• Have you checked the TypeKit documentation for waiting when TypeKit is loaded?  (found here: https://helpx.adobe.com/typekit/using/font-events.html)

You can try this to wait until TypeKit is fully loaded before running your animation since it loads via async

try {

   Typekit.load({
      loading: function() {
          // run SplitText here when TypeKit loaded
      }
   });

} catch(e) {}

If that doesn't help, then so we can better help you can you please setup a limited codepen demo example so we can test your code live. It just needs a couple of tweens and a sentence showing this behavior

 

 

Thanks!

[joe_midi]

You might want to check out the Web Font Loader library: https://github.com/typekit/webfontloader

 

It was created by Google and TypeKit