External CSS is working on localhost but not working on online server

[bhaswanth]

I created a website. And the external stylesheet which I have linked to it is working perfectly on my system localhost. But when I upload it to the online server, it doesn't working. Because of this I have to add internal stylesheet which is waste of memory and execution time. I don't know what is the problem, the code is perfectly allright. I don't know how to fix this problem.
Here's the css link to my website:-

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" href="icon.png" type="image/png">
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

[Luuk]

The problem is probably mixing HTTP and HTTPS.
Make sure that if your page is HTTP, the stylesheet is also HTTP.

Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).

[bhaswanth]

Thank you fro your kind response. Can you please explain how to do this....

[Luuk]

First we have to know how you are going to your webpage, do you use HTTPS? of HTTP.

My guess is you use HTTTP.
If that is true, than change line #5 from 'https://...' to 'http://...'

Normally you should not do that (just change HTTP to HTTPS or the other way around), but this page is also reachable via HTTP, which you can check by typing this address in the address bar of a browser. then browser will respond with a download, and not give an error 404, which means the page exists.

[madankarmukta]

Another approach to address this problem is to download the external css and then refer it with href.

Please let us know if this won't help.

[GazMathias]

Yet another approach is to use protocol relative URL references whereby you drop the protocol from the link entirely:

<link href="//fonts.googleapis...

The browser will then use the protocol that was used to load your page from your server to request the external resource.

It is useful if you happen to add a certificate later or change from a development to live scenario as you don't have to change anything.

Gaz

[Luuk]

But in the question was:
"Because of this I have to add internal stylesheet which is waste of memory and execution time."

How much time and memory will be wasted by putting this stylesheet locally?

[GazMathias]

Indeed.

Might I also suggest that the OP learn to use the developer console of their chosen browser as no doubt it would have indicated the mixed mode failure and is an invaluable tool regardless.

Gaz

[bhaswanth]

but that link is provided by google fonts to import external fonts from google. If we remove the protocol from that link, then will it work properly?

[GazMathias]

Yes,

It is in the specification, which describes the mechanism browsers should use to fill in the blanks at the start of URLs to save developers retyping the full URL of every resource.

For example you may set an image URL to 'assets/images/someimage.jpg' but the browser will send the request for it to 'http://www.yoursite.com/assets/images/someimage.jpg' because the browser fills in the 'http://www.yoursite.com/' automatically.

However, where possible it's best to use HTTPS everywhere when live.

Gaz

[bhaswanth]

yeah I think this might be helpful to me. I should try it once.
Thank you

[alexhuber]

totally agree with Luuk

[aki33]

Usually this is cache related. Try doing a hard refresh -- CTRL Shift R. Also, if you are using apache2, use the "-i" option. Files are not updating because they are cached. And if you cannot do this, change the href="styles.css" into href="styles.css?v=version2" (that's worked like a charm for my website when I faced the same issue). It would make the server think there is a new file, so then it updates the cache. Or you can always delete the old one and upload the new on.