I've came across this issue where the browser (Chrome) is sometimes rendering characters as completely different ones, however in inspect element they're written how they should be. You'll see in the images that on the right inspect element shows what it's supposed to be, and on the left shows what it's rendering as.
I can't find a reliable way of replicating this problem, there is no correlation of events that I can see to cause this to happen
I have noticed that the replaced words contain the correct amount of characters for the word it's supposed to be.
This can happen to any element on the site as far as I've seen. It doesn't matter if it's getting the content from the database or if it's hard coded.
Refreshing the page usually causes text to render as normal. It doesn't happen all the time.
I've just recently joined stackoverflow so I need 10 reputation to post pictures apparently.
It appears that the issue seems to be caused by 'text-rendering: optimizelegibility;'.
Mostly when used in conjunction with text-transform:uppercase;/text-transform:capitalize; , or letter-spacing.
It may also be an issue with opimizelegibility and Proxima Nova since I've never encountered this anywhere else.
After looking up the textrendering:opimizelegibilty; property more, I've released that it's an awful decision to use it more than sparingly due to performance issues (And this strange one..). From now on I'll only be using it in cases where the kerning looks particularly poor.