Amando Vledder Amando Vledder - 6 months ago 28
HTML Question

Loading Google Fonts over HTTPS still give MixedContent error

I recently added SSL to my website but it keeps giving me the error:

Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.


While the link to the fontsheet is
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic


I also tried downloading the file and then loading the local version but that didn't work either.

Tried code:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">

<link rel="stylesheet" type="text/css" href="font.css">

@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");


Also made sure all links in the font file are HTTPS

I hope someone can help me with this.

Answer

You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:

@import url("https//fonts.googleapis.com/css?family=…");
                 ^^

The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic

And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.

Comments