Amando Vledder Amando Vledder - 2 years ago 139
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 '' was loaded over HTTPS, but requested an insecure stylesheet ',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,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=",300italic,400,400italic,600,600italic,700,700italic,900,900italic">

<link rel="stylesheet" type="text/css" href="//,300italic,400,400italic,600,600italic,700,700italic,900,900italic">

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

@import url("//,300italic,400,400italic,600,600italic,700,700italic,900,900italic");

@import url(",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 Source

You have a simple typo in your stylesheet

@import url("https//…");

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,300italic,400,400italic,600,600italic,700,700italic,900,900italic

And requesting that URL makes your server issue a redirect to – and that is the origin of the mixed content warning.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download