How to animate text with css font-weight property in jQuery ? normal to bold

Question

I am trying to animation like opacity effect, which turns text bolder slowly. Tried usual animate() method but didn't work. Searched for it but coundn't find any example. Is it possible to do this?

jsFiddle.

jQuery:

var Text = $('h1');
Text.click(function() {
    Text.animate({'font-weight':'bold'},600)
        .delay(200).animate({'font-weight':'normal'},600);
});

Answer 1

EDIT, April 2021: This is now possible to achieve either with transition: font-weight or more seamlessly with variable fonts.

Sadly I think this is impossible.

Each character in a font has a specific shape. In addition, similar characters in different weights weights are also distinct—a bold character does not simply have a mathematically-defined offset from its regular counterpart.

It would be very easy to jump from regular to bold or italic with jQuery.css(), but there it is currently impossible to jQuery.animate() the transition of font-weight in the browser. It is hard to do in animation as well because there are no “frames” between the different weights, as they are all drawn separately.

However,

If you choose a font that has a consistant spacing of letters for the different weights—such as Exo—and do a stepped animation from thin to black you might come close to the desired result.

Starting from your jsFiddle that is what I could come up with:

Here is working jsFiddle.

And the rather dumb Javascript behind it:

Text.click(function() {
            
  Text.css({'font-weight':200});
  setTimeout(function(){ Text.css({'font-weight':300})}, 30)
  setTimeout(function(){ Text.css({'font-weight':400})}, 60)
  setTimeout(function(){ Text.css({'font-weight':500})}, 90)
  setTimeout(function(){ Text.css({'font-weight':600})},120)
  setTimeout(function(){ Text.css({'font-weight':700})},150)
  setTimeout(function(){ Text.css({'font-weight':800})},180)
  setTimeout(function(){ Text.css({'font-weight':900})},210)

});