Mixed Content: The page was loaded over HTTPS, but requested an insecure font

Secure websites transfer the data in an encrypted format. This ensures that an attacker who sniffs the packages from the network cannot read the data. Securing your website by using an SSL certificate is the first step towards the right direction. Browsers take this approach to the next level by making sure that all resources use HTTPS. This is where you may come across this error: “Mixed Content: The page was loaded over HTTPS, but requested an insecure font“.

This error doesn’t show up to the end users right away. It stays in the “Console” tab of your browser’s “Developer Tools” window. The website shows different symptoms when this error occurs in the background.

Symptoms of Mixed Content (Insecure Font) Issue

When there is a “Mixed Content (Insecure Font)” issue:

• Your website may not use the font you selected
• Some icons may not appear
• There might be CSS adjustment issues

In order to figure out the underlying issue, turn on “Developer Tools” and visit the website again. The “Console” tab should give the detailed error message:

Mixed Content: The page at ” was loaded over HTTPS, but requested an insecure font ”. This request has been blocked; the content must be served over HTTPS.

As you see in the screenshot above, the social media icons on the left side don’t appear due the issues mentioned in the “Console tab” on the right side.

Another indicator of a partially secure site is the “Parts of this page are not secure” error on the address bar. Here is how to fix it: Parts of this page are not secure (such as images)

What is Mixed Content?

Mixed Content is an error message that shows up when your website uses HTTPS but some resources (images, videos, extra HTML, CSS, or JavaScript) on your website are loaded on HTTP. This situation weakens your website security and it makes it vulnerable to man-in-the-middle attacks.

Here is Google’s warning about the mixed content:

Requesting subresources using the insecure HTTP protocol weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.

Google Developer Guides

How to Fix Mixed Content (Insecure Font) Issue?

Fixing the mixed content issue is relatively easy. Simply change the resource URL from HTTP to HTTPS. However, there might be times that make the solution more challenging.

I came across this issue when the Social Pug plugin stopped showing icons on the social media buttons. The root cause was the caching enabled by W3 Total Cache plugin. If you are in a similar situation, there are three ways to fix the issue:

• Disable W3 Total Cache (not recommended because your website’s performance may decrease)
• Change the font URLs of Social Pug plugin to HTTPS
• In some cases, URL Rewrite rules may cause this issue. Check your .htaccess file

I preferred changing the URLs in the plugin CSS file:

Test after the fix

After implementing the fix and cleaning the browser cache, the social media icons showed up without any issues!

Another way to provide secure connection for your website is that using secure flag in the website cookies. For a well-explained post about how to improve your website’s cookies, check out this post: Secure cookie flag