add arrow-down arrow-left arrow-right arrow-up authorcheckmark clipboard combo comment delete discord dots drag-handle dropdown-arrow errorfacebook history inbox instagram issuelink lock markup-bbcode markup-html markup-pcpp markup-cyclingbuilder markup-plain-text markup-reddit menu pin radio-button save search settings share star-empty star-full star-half switch successtag twitch twitter user warningwattage weight youtube

Font issue fixed

philip

43 months ago

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:

http://i.imgur.com/eRNO13G.png

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:

 text-rendering: optimizeLegibility;

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!

Comments

  • 43 months ago
  • 3 points

Disclaimer: No real-life bugs were harmed during this process.

  • 43 months ago
  • 1 point

Philip, on April 1, the font should be Comic Sans for all the comments/topics and Papyrus for the titles of stuff.

at least if i was in charge i would do that if possible. now i know it's probably super complicated and you have to dig through a ton of code but it's cool to imagine

  • 43 months ago
  • 1 point

If I want to retain the employment of our design lead I can't make that happen. But we'll work on putting something equally crazy in the code.

  • 43 months ago
  • 1 point

I would change the link at the top (PCPP Logo and No Piracy) to Darude-Sandstorm or Rick Astley's Never Going To Give You Up on April Fools.

Muawhahahahhahahaha! Now I feel as evil as Mr. Burns :)

  • 43 months ago
  • 1 point

and now i'm genuinely nervous as you what you have planned

  • 43 months ago
  • 1 point

Oh, thought you fixed the google-merriweather thing

But this is great too! Good job

  • 43 months ago
  • 1 point

This was the Google / Merriweather issue. (Now though, they did change the style of the Merriweather font, but we're looking into whether to leave it or not.)

  • 43 months ago
  • 1 point

I got that! Good to see it fixed.

  • 43 months ago
  • 1 point

I'd just like to add that squashing this bug provided much needed sleep to all of the Philip's employed at PCPartPicker.

[comment deleted]
  • 43 months ago
  • 1 point

Awwwww. I just started getting used to it lol.

Thanks for the fix though!

[comment deleted]
  • 43 months ago
  • 2 points

With eager anticipation I posted on our internal chat that I had identified the multi-week bane of my existence. If it was an actual bug, I would have watched it writhe in agony, then I would have crushed it out of existence with glee.

[comment deleted]
  • 43 months ago
  • 2 points

Delicious.

[comment deleted]
[comment deleted]
[comment deleted]

Sort

add arrow-down arrow-left arrow-right arrow-up authorcheckmark clipboard combo comment delete discord dots drag-handle dropdown-arrow errorfacebook history inbox instagram issuelink lock markup-bbcode markup-html markup-pcpp markup-cyclingbuilder markup-plain-text markup-reddit menu pin radio-button save search settings share star-empty star-full star-half switch successtag twitch twitter user warningwattage weight youtube