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

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);
});
jquerycssanimationfontsjquery-animate


Solution 1:[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)

});

Solution 2:[2]

You could use pure CSS, using text-shadow and the pseudo class :hover, with a transition to animate it

.animate {
  font-size: 35px;
  transition: 0.6s;
}
.animate:hover {
  text-shadow: 0 0 2px black;
  transition: 0.6s;
}
<div class="animate">StackOverflow</div>

Also you could use jQuery, by using addClass():

$("#animateBold").click(function() {
  $(".animate").addClass("bold");
});
.animate {
  font-size: 30px;
}
/* Then .bold CSS class */
.bold {
  text-shadow: 0 0 2px black;
  transition: 0.6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">StackOverflow<div>
<button id="animateBold">Animate!</button>

Or, if you wanted a toggle effect, using a ternary operator:

($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");


$("#toggleBold").click(function() {
  ($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");
});
.animate {
  font-size: 30px;
  transition: 0.6s;
}
.bold {
  text-shadow: 0 0 2px black, 0 0 2px black;
  transition: 0.6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">StackOverflow<div>
<button id="toggleBold">Animate!</button>

Solution 3:[3]

It is possible with font-variation-settings (https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)

You can check it in action on this website when hovering over brand names - https://www.ahundredmonkeys.com/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Igor Tot

Related Questions