http vs https: Google fonts and jquery issues

May 12, 2018

I had a bit of an odd experience this week. On one of my WordPress websites, the Google fonts I had installed stopped rendering properly. I did a bunch of web searches for possible causes. While there were lots of articles about similar issues, none seemed to address my case. Everything had been working fine for years and suddenly stopped on this particular website. I updated my WordPress version and made sure all my plugins were up to date — still no luck. I checked my other WordPress websites and they seemed to be working correctly. I checked the problematic site using other browsers (Chome, Firefox and Safari) and the results were the same. I tried clearing the cache — didn’t help.

Not long after I began to investigate the font issue, other things started to fail. My drop down menus stopped dropping down, my image carousel ceased to function. I was looking at at total Javascript melt down.

In the end the solution was very simple but I had completely overlooked it. The problem arose due to the necessity of using secure connection to most websites (https as opposed to http). Google is already flagging websites that are not protected by a secure connection.

The issue with my site come down to the letter “s” in three places. The developer that created the template for my site used an http:// call for the jquery library and the google fonts. I changed all three lines in the header file, adding an “s” to make them read https:// (etc) and everything worked again.

I’m sharing this story because I’m imagining that we will face a number of issues as security ramps up across the web. Similar to the Y2K issues, there are probably lots of things under the hood (particularly javascript libraries) that I haven’t kept updated and may come back to bite me.

Anybody have any best practices guidelines for Javascript?