Thanks Open Sans
A large number of sites on the web use Open Sans. A few weeks ago I learned just how many use Open Sans thanks to an error I kept noticing. Now there’s nothing wrong with using Open Sans, I find it a good alternative to the default which is normally arial or helvetica. It is however not a good alternative when everything meant to render as Open Sans, does so only as the Extra Bold Italic weight.
Seeing everything in Extra Bold Italic recently happened to me while working on a wordpress project. It didn’t always display that way, a few months earlier it looked fine. I was very freaked out because googling had lead me to believe the site had been hacked. Cross checking this on my other test wordpress site, and my personal site revealed that it was also happening there.
Inspector revealed that the css had an em tag, which confused me even more because they were where I haven’t been using them. Going further into the css helped even less. After giving up for a few days, I started to experience the problem on other sites, sites where I was positive that they were not always in extra bold italic. Checking these sites on my iphone and ipad revealed that yes, this was probably a system issue. Not a css, or domain issue.
Opening Font Book I started disabling fonts that could possibly have caused this. Helvetica causes all sorts of headaches so I started there. Eventually I got to Open Sans and realized I only had one Extra Bold Italic weight installed. FINALLY. Disabling that, and then eventually installing the family solved my problems.
This speaks to a greater issue though, as we’ve gotten better at rendering fonts on our websites, we’re still relying on system fonts that can give us mixed results. I normally rely on Type Kit or a light weight google font to load fonts. Relying on system fonts can still have uncontrolled, and undesirable results. Yes, Wordpress is a CMS, so having it load a system font is a better idea because you’re moving back and forth between pages so load times matter. Larger sites that also have load time issues will also use system fonts to save load times, but if you’re hoping for the off chance that a user has Open Sans, consider the chance that they might have just downloaded one weight and could break the hell out of your site.
TLDR; I only had Open Sans Extra Bold Italic installed, so everything that rendered Open Sans was in Extra Bold italic. I disabled it, and eventually installed the whole family and this went away.