Loading Google font in HTTPS, content being blocked

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.'" />';
            }

Answers


Edit your theme replacing every occurency 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.


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/...


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

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


Need Your Help

How to remove a carriage return from a string

java regex carriage-return

String s ="SSR/DANGEROUS GOODS AS PER ATTACHED SHIPPERS

Ignore code blocks in Golang test coverage calculation

unit-testing go code-coverage

I am writing unit tests for my golang code, and there are a couple methods that I would like to be ignored when coverage is calculated. Is this possible? If so, how?