Jump to content


Web fonts odd tweening effect/bug

Moderator Tag
Go to solution Solved by ohem,

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

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

  • Solution

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.