Font-Weight CSS Transition in Chrome

Question

Trying to get font-weight to gracefully transition from \'400\' to \'600\' using CSS but it doesn\'t appear to be working in Chrome. Is this a known bug or am

Answer 1

I've tweaked @Idra's fiddle to make the normal to bold transition a bit smoother. Here's the fiddle: http://jsfiddle.net/y7rLwx95/

Changes... Since the text width will get wider when going to bold, I've added an initial "stretch" transition by increasing the letter spacing:

.element:hover {
   letter-spacing: 0.9px;
   transition: all .3s linear;
}

Then delayed the fading in of the bold ::before element:

.element:hover::before {
   opacity: 1;
   transition-delay: .2s
}

Also some additional tweaks here:

.element::before {
   transition: all .3s linear;  /* replace */
   letter-spacing: 0;           /* additional */
}

The transition timing is just whatever feels right to me. The original idea @Idra posted is significant to me. I accept that fact that the widths should be different between normal and bold, as that's the intent of different font weights. So really the challenge, IMHO, is to figure out how to go between the 2 looks in a smooth, no jarring way. This seems to be the best solution so far I've found.