Google Web Fonts on HTTPS pages on Chrome

FontsHttps

Fonts Problem Overview


I'm working on an ecommmerce project. Parts of the site are HTTP by default. Others, such as the checkout page, are HTTPS by default. On the HTTPS pages I'm getting this message on the console on Chrome:

[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=PT+Sans. 
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700.
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Patua+One.

The fonts are linked on the document head in this way:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

It looks ok on other browsers I have tested so far.

Fonts Solutions


Solution 1 - Fonts

Create a schema agnostic url

Change http://fonts.google... to //fonts.google...

Drop the http: or https: from the front, the browser will use whichever schema you're currently using on the site.

> You may request resources using https from http, but not the other > way round. An alternative to the above solution (and probably best practice) is to just always use > https if it's available (which it must be if you're using this style > of link, otherwise there no point in it anyway).

Solution 2 - Fonts

Remove the protocol from your URL and let the browser determine it:

<link href="//fonts.googleapis.com/css?family=PT+Sans" ...

If your page is HTTPS, the font will be loaded from the HTTPS URL. If the page is HTTP, it'll be loaded from the HTTP URL.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJack PilowskyView Question on Stackoverflow
Solution 1 - FontsLeeView Answer on Stackoverflow
Solution 2 - FontsBlenderView Answer on Stackoverflow