For the last few weeks we were fighting a font issue. Our beloved Merriweather font, and even our Source Sans Pro font, was intermittently rendering really really bizarrely. On some page loads (but not all), it'd render something like this:
It would show up about one out of every page loads. It was intermittent between tabs. And for a while, it only reproduced in our production environment (but never our dev environment). Until last night. Then it showed up in dev, and I licked my lips knowing that bug was mine...
I reduced the problem down to a single body and p tag, and a css file consisting of two rules. At that point it only reproduced one out of every ten or so loads (cached, not full reload). Turns out, it was this simple css statement:
That was it. That was what was causing our font rendering issues in some browsers. I was about to lose my mind. It started right about when I switched us over from Linode to AWS. So naturally I wondered if I botched something along the way, or if the change of hosting providers introduced different timing on loads that exposed a race condition. In the end though, turns out it was a browser rendering bug with optimizeLegibility and web fonts in some browsers.
I can sleep, finally I can sleep well. Good night!