HTTP Problems with Google Fonts

Question

I need to change all of the "http://" to "https://" in a file on my site. I did these steps. By the way, I'm using Magento 1.9.2.4 and a Chromebook -

1. I right clicked on my site and clicked "Inspect".

2. The screen splits in two, and on the right there is a message saying:

'http://fonts.googleapis.com/css?family=Arimo:400,700|Open+Sans:400,700,600italic,300|Roboto+Condensed:300,400,700'. This request has been blocked; the content must be served over HTTPS.

3. I click on this and get taken to this link:

http://fonts.googleapis.com/css?family=Arimo:400,700|Open+Sans:400,700,600italic,300|Roboto+Condensed:300,400,700

4. I right click on "view page source" and then I right click again and click "Inspect".

5. The screen splits in two and on the right at the top there are tabs that say "Elements, Console, Sources, Network, Timeline, and Profiles".

6. I clicked on "Elements", double clicked on the code I wanted to edit (you can also right click and hit "Edit Text" or "Edit as HTML"), and typed an "s" in front of all the links that say "http://" and change them to "https://".

7. However, there is no way to save this file where the next time I go to my site, it won't have these problems.

8. I tried going to the "Sources" tab and add an "s" in front of the "http://", but I can't edit this file in the "Sources" section directly.

How can I change all of the "http://" links to say "https://"?

Please give as DETAILED information as possible Ex - Go to CPanel, click on..., scroll to the middle of ... file, etc.

Thanks!

Answer 1

First you will have to understand editing from browser console is only for testing purpose. It will not save it in to your server. Just imagine if it would save from there, then anyone would destroy your site.

What is the error?

This request has been blocked; the content must be served over HTTPS.

This means you are trying to load non secure links (http://) in to your secured site (https://). You have to make sure all your content runs with https://

Now, how to change this in your server?

For this you will need to have ftp access. Simply login to ftp and find the file that corresponds to this google font.

I think it should be in your one of css file.

All css files are located in this:

skin/frontend/[theme_package]/[your_theme]/css/file.css

You can find exact file location from browser console (inspect element)

Now, you can edit this file and replace this:

http://fonts.googleapis.com/css?family=Arimo:400,700|Open+Sans:400,700,600italic,300|Roboto+Condensed:300,400,700

with this:

//fonts.googleapis.com/css?family=Arimo:400,700|Open+Sans:400,700,600italic,300|Roboto+Condensed:300,400,700

This will make sure it will load with http:// and https:// both.