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.'" />';
}
Yes, you can use them commercially, and even include them within a product that is sold commercially. Usage and redistribution conditions are specified in the license. The most common license is the SIL Open Font License.
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.
This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.
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.
Use protocol relative URIs
Just use a //
prefix. (instead of http[s]://
)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With