Loading Google font in HTTPS, content being blocked

Question

There is a wordpress theme that automatically pulls the option font picked and requests it from google font. when ssl was needed for a few selected pages the font became missing

Viewing the console log:

[blocked] The page at 'https://www.example.com/' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800': this content should also be loaded over HTTPS.

would going into the code and make all requests in https from google font work? Is there some workaround to this?

found the source code... but seems like it is already doing this... could there be a error in the if logic?

$prefix = "http";
            if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') $prefix = "https";

            if($get_google_font){

            if(!in_array($rule_split[0], $this->used_fonts))
            {
                $this->extra_output .= "\n<!-- google webfont font replacement -->\n";
                $this->extra_output .= '<link id="google_webfont_'.$this->webfont_count.'" rel="stylesheet" type="text/css" href="'.$prefix.'s://fonts.googleapis.com/css?family='.str_replace(' ','+',$rule_split[0]).$font_weight.'" />';
            }

score 53 · Accepted Answer · edited Jul 23 '19 at 09:04

53

Edit your theme replacing every occurence of http://fonts.googleapis.com/... with https://fonts.googleapis.com/... (mind the s).

Resources that might pose a security risk (such as scripts and fonts) must be loaded through a secure connection when requested in the context of a secured page for an obvious reason: they could have been manipulated along the way.

edited Jul 23 '19 at 09:04

Michael Currie

13,721
9
42
58

answered Jul 02 '14 at 14:37

Stefano Sanfilippo

32,265
7
79
80

Yes, the contrary (loading resources via TLS/SSL in a non-secured page) is possible. – Stefano Sanfilippo Jul 02 '14 at 14:39
Ok Just needed to confirm, I will go into the code then. thanks~ – vico Jul 02 '14 at 14:40
any idea on the code I posted? seems to already doing that, but the if statement seems to be false even on https – vico Jul 02 '14 at 14:45
1

You left a spurious `s://` in the ` – Stefano Sanfilippo Jul 02 '14 at 15:15
You could just just remove the protocol altogether, so use "//fonts.googleapis.com/..." – bayological Jan 02 '15 at 23:58
5

Three years later, the situation has changed. Protocol-relative URIs are discouraged nowadays, given that secure connections are easier to set up and very cheap if not almost free for many common uses. If you can serve via `https`, then by all means, do it. – Stefano Sanfilippo Jun 17 '17 at 12:23
@StefanoSanfilippo maybe it would be worth to keep in mind that this might interfere with fallback to `http` mechanisms, in particular cases – Alex P. Jan 05 '18 at 11:53

harmv · Answer 2 · 2018-09-26T10:19:58.000

28

Use protocol relative URIs

Just use a // prefix. (instead of http[s]://)

On an https page, the secure version wil be loaded.
On on a plain http page, the plain http version will be loaded.

Edit your theme replacing every occurence of http://fonts.googleapis.com/... with //fonts.googleapis.com/...

edited Sep 26 '18 at 10:19

answered Sep 15 '16 at 10:38

harmv

1,905
22
22

score 7 · Answer 3 · answered Nov 10 '16 at 07:42

let the browser handle all the things just remove 'http' from your reference.

likewise you have to do for other libraries also if you are facing same problem with them e.g.

https://fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

to

//fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

same for

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

to

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

score 1 · Answer 4 · answered Dec 16 '17 at 05:07

1

I faced this problem when you are using google cdn links and which are not accessible (such as country like china), try to use local files in place of cdns

answered Dec 16 '17 at 05:07

Ashish Devade

37
4

I am wondering if there is a way to use both... i.e a script that uses google link but if its not working then rely on local files for the same font. – Imran Bughio Apr 10 '19 at 12:49

Loading Google font in HTTPS, content being blocked

4 Answers4