HTTP Problems with Google Fonts UPDATES

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 directly 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 on my site where the next time I go to my site, it won't have these problems.

8. Adarsh Khatri told me to delete the "http:" and keep the "//" so it can load on both "http://" and "https://" just in case my site switches back to the "http://" version. This is good advice.

EXACTLY HOW can I change all of the "http://" links to say "//"? Is there a way to do this automatically or do I have to do it manually for all of them?

UPDATES - Please DO NOT tell me I need to edit these files, I ALREADY KNOW that, I need to know EXACTLY HOW to edit these files.

Maybe I'm editing the wrong way. If so -

• Please tell me the EXACT STEP BY STEP INSTRUCTIONS on how you would FIX this (provide as much DETAIL AS POSSIBLE with SCREENSHOTS for EACH STEP and CLEAR CUT EXPLANATIONS along with the screenshots)

• Please tell me how to do edit and save this on other computers too like (Windows, Mac, Chromebook, etc) what browsers you use for each operating system like (Firefox, Google Chrome, Safari, etc)

Ex -

Step 1 - Go to CPanel, admin panel, your site or wherever to edit and save this file to your site.

Step 2 - On your site, right click "this and that", click on....., then click.... etc

• In the CPanel or where the right place to go is located, go to "skin/frontend/.....", or go "here and there", click on "this" file, scroll down until you see "this line of code" etc

• In the admin panel or where the right place to go is located, go to "system -> config -> ....", or go "here and there", switch "this and that" to "Yes or No", or click on "this and that" etc

Step 3 - Scroll down to the "top, lower top, upper middle, middle, lower middle, bottom, etc" part of "this file" and find "this code" (It would be great if you can show me screenshots of exactly how you would edit and save this)

• What programs can I install to edit and SAVE these on my site? If there aren't any or no need for any, EXACTLY what do I do to PROPERTY EDIT AND SAVE this file to my site? (Please provide clear step by step instructions)

• Where can I find these editors? Are they free or not? What operating systems are they for?

Thanks!

Answer 1

First of all, you need to be aware that editing using the inspector in a browser only changes things in that view of the page in your browser - as soon as you refresh the page you lose the edit. Any edits you make this way will not be permanent. You need to find the file on your server. It will (probably) be in app/design/frontend/your_theme/template/page/html. You are (probably) looking for a file called head.phtml.

You can find the path to teh correct file by turning on template hints in Magento system>configuration>developer>debug . Make sure the current scope is set to default store view. Warning - this will put big red ugly things all over the frontend of your website so best do it on a development site if you can.

This should be enough to get you started.

Answer 2

Thanks to @jscar and @Adarsh Khatri, this is the answer for getting your Google Fonts to work on your sites.

1. Go to CPanel and go to - app/design/frontend/ [your theme] /default/template/page/html

2. Click on "head.phtml" and click "Edit".

3. At the bottom of the file, look at the code that says this -

   < link rel="stylesheet" href="http://fonts.googleapis.com/css?

Delete the "http:" and keep the "//". This way if your site bounces back with "http://" and "https://", this'll prevent you from having to go back every time and changing them to "http://" and "https://" manually whenever they switch back and forth. Just keeping "//" is good as suggested by @Adarsh Khatri.

So thanks again @jscar for this help! And you too @Adarsh Khatri!