Have you ever run into a certain piece of text on your site that isn’t following the font-weight that you declared? Even worse, the correct CSS rule for font-weight is applied and your text still isn’t displaying correctly? Troubleshooting these types of bugs can be really frustrating because it appears you’ve got all your ducks in a row, but nothing is working as expected. This issue is found more often during some type of interaction, like a hover event, but can also occur on a static element.

The issue that occurs is related to the transform property. The font-weight will appear to flicker on hover or page load, but what’s actually happening is the element transforming from a 2D space to 3D. Or vice versa. To resolve this issue you can add the following to any element with the issue:

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

This will render the element in 3D space on page load and remove any undesired font-weight changes.

Option 2
If that doesn’t resolve your issue, look at the element’s parents. One of those elements may have a translate3d in place causing some of its children to take part in this weird font-weight rendering.

Option 3
If you still are having issues with this, you may want to try and do the opposite. Instead of adding the translate3d, try removing all transforms from the element. It’s possible your element was doing the inverse, changing from 3D => 2D and causing your font-weight to change.

Last Resort
If you are STILL not having any success, we have seen unique cases where a translate3d somewhere else on the page is causing fonts to render incorrectly. It’s a longshot, but it may be worth combing through the given page’s code and see what transforms are present. A good first step is usually removing any JS libraries that may be appending code after page load.