How to use Google fonts on an SSL secured website without getting insecure messages

Tutorials
September 17, 2017

If you’re a blogger or web developer, you’re probably aware of the change that Google made to websites in regard to SSL certificates. While Google isn’t exactly requiring websites to have them in order to be live, websites that don’t have an SSL certification are labeled with a big, red “Not Secure” tag right next to its website address. Ouch!

Most people are purchasing an SSL certificate for their blog or website because of this change. If you’re lucky like me and have an amazing web host like SiteGround, you get one for free with your hosting package.

Google made the change to protect users from having their information, like login and payment details, from being hacked and used. Nothing worse than fraud, right? A website with an SSL certification is secured, so its users don’t have to be worried when they’re entering personal information. Granted, Google isn’t guaranteeing that an SSL certified website has no chance of being hacked into, but it’s as close to perfect as it gets.

Speak English, please!

If you pay attention to your search bar on your web browser, you’ll notice that some website addresses start with “http://” and others start with “https://”.

What does this mean?

Websites that have “http://” in front of its address lack an SSL certification, which means that the website is not encrypted. This is bad, which is why websites that lack that pretty little SSL certification are branded with a red “!” and a red “Not secure” message. See the image below for an example:
No SSL

 
Websites that have “https://” in front of its address are encrypted with an SSL certification, which is good and means that it’s secure. See the image below for an example:
SSL


When I was installing the script for some Google fonts that are used on my blog, it caused SSL insecure error messages. This meant that my blog was branded with that ugly, red “Not secured” message even though I still had my SSL certification. Uh oh!

Don’t worry, here’s the fix!

Here is the script for one of the fonts I use on my blog:


 
To fix the SSL insecure error messages so that my blog would show as “Secure” again, all I did was remove the “https:” part of the code:


Fixed!
 
 
Disclosure: This post contains affiliate links. I occasionally promote products that I love, and if you purchase any products that I recommend through my link I will receive a small commission at absolutely no extra cost to you. For more information, please read my disclosure policy.

Leave a Comment

%d bloggers like this: