Monospace font issue in Mozilla Firefox

Sometimes I’m a bit lazy, and I don’t really care about basic things. Until when these things become a real problem.
An example is the issue that I encountered in my browser after last upgrade of Arch Linux. I have never set up my fonts, because of my laziness, so I have always used the default value.

This time, I don’t know why, some fonts became unreadable like in the picture!

So I have tried something in my default fonts, but nothing changed. After that this morning I’ve thought to the browser preferences!
I’ve followed the step to change the fonts: Preferences > Content > Fonts & Colors > Advanced and I’ve tried to figure out which one was the problem. Monospace fonts: that was the font that creates so chaos.

My setting was monospace, the default one I guess. I have changed it to one that I like and now everything is working!

If you find out something more about this issue, or you simply know more than me, leave a comment to this post! So me and the followers can learn more!! Thanks!
GWH! #gwh

———————————–UPGRADES———————————————
If the problem persist, as in my case, try to install ttf-dejavu that automatically set a new configuration of fonts. These fonts are recognized by the web pages.

Another way to fix the issue (thanks to Upsilon) is to install ttf-fira-mono.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.