Web fonts odd tweening effect/bug

[sorciereus 8 Likes (Newbie)]

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) 

[ohem 334 Likes (Leader)]

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;

[sorciereus 8 Likes (Newbie)]

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.