The Day the F Went Missing

I check Atomic Spin every day (and I hope you do, as well). One reason is because there is always interesting content, and I can learn about some new area that I knew nothing about. Another reason is that it can help me to get to know my colleagues better. And a final reason is that I’m a tester, so I want to check that the content is correct.

A few weeks ago, I was reading the latest post and noticed that the “f” was missing from the word “find.” I thought it was just a typo, made a note so I could correct it, and carried on reading. A bit farther on in the post, I noticed “ilter” instead of “filter,” then “irst” instead of “first.” It seemed that whenever a word started with an “f,” the “f” was being lost.

I used the debug tools to look more closely and saw the “f” was there in the page source, so what was happening? I showed it to a couple of colleagues, and one of them realized the problem was only happening with the “fi” words, which meant it could be a ligature problem, which meant a problem with the font.

And that was indeed the cause—we use a Google Font, and an update to the one we were using had a mistake in the handling of ligatures.

This can give you something to think about: What external services are you dependent on, and are you aware of when they perform updates? How would you pick up a subtle error like this one? Having a service go down should be obvious, but a minor mistake like this? You might have a golden screenshot of your site and perform a comparison every day—but would your golden master contain a ligature?

I had a few takeaways from this:

  • It’s hard to fully understand a system and keep up to date on everything that is happening in tech. I didn’t know about Google Fonts before, but now I do.
  • Although I knew what ligatures were, I’d never considered how they might go wrong and affect a web page.
  • And finally, my co-workers are great, and sharing a problem can lead to a solution.