Got problems with fonts rendering strangely in Chrome? Looks like they change weight, especially when animating opacity or other properties? Never fear, the following css property should solve your problems.

subpixel-antialiased, is the default value, however this causes weight issues when animating text elements. So you can either apply this property to the element itself, or the body if you feel like it. Sometimes fonts appear too thin with antialiased, which is why you may not always want to apply this property to the body. There’s also a none value, should you wish to use it.

I have no idea why fonts seem to have a mind of their own with subpixel-antialiased, but it’s an easy fix nonetheless.