Jump to content


Web fonts odd tweening effect/bug

Recommended Posts

Hi there. I'm using TweenMax to do position tweens on divs containing text that is styled using a font family from google fonts.


The font weight is bold.


I find on Firefox and Safari, the font seems to change weight during the tween. Is this a known bug?


(don't have time to put together a codepen at the moment but will if needed) 

Link to comment
Share on other sites

I've come across the same issue... adding force3D:false should fix it.  


force3D:true can also fix it, but it makes the text appear thinner in Safari so I prefer false.


If you don't mind the text being slightly thinner you can also just do this in the CSS; that fixes it too: 

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  • Like 2
Link to comment
Share on other sites

Great thanks alot - The force3D fixes it in Safari not Firefox but if I combine the force3D:false with -moz-osx-font-smoothing: grayscale; I get pretty good results. The font is thinner in Firefox but looks good in Safari and Chrome. 


Thanks again. 

  • Like 1
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.