https will affect Google CSS style loading

In website development, we often use external CSS style sheets to beautify web pages and enhance user experience. Google provides some commonly used CSS style libraries, such as Material Design Lite and Bootstrap. We only need to introduce corresponding links in the web page to use these beautiful styles.

However, sometimes we encounter a problem: Google’s CSS styles fail to load when the website uses the HTTPS protocol. This problem has troubled many developers, and today we will explain in detail the cause and solution of this problem.

Problem Description

When we introduce Google’s CSS stylesheet links typically look like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

This link imports the Google-provided CSS stylesheet via HTTPS. However, sometimes, when our website also uses HTTPS, the stylesheets won’t load.

Cause of the Problem

The cause of this problem is simple: browsers follow the same-origin policy when loading external resources (such as CSS stylesheets). This means that if our website is accessed via HTTPS, any external resources must also be loaded via HTTPS; otherwise, the browser will consider them insecure and block them from loading.

Google’s CSS stylesheet links are loaded via HTTP by default. Therefore, when our website uses HTTPS, browsers will refuse to load these resources, resulting in stylesheet loading failures.

Solution

To solve this problem, we can take the following approaches:

1. Use relative links

A simple solution is to download Google’s CSS style sheet locally and then import it using relative links:

<link rel="stylesheet" href="css/fonts.css">

This will avoid HTTPS restrictions. Of course, this method only works when the Google-provided CSS stylesheet is relatively simple. If the stylesheet is complex, this approach will increase maintenance costs.

2. Use HTTPS links

Another solution is to use the HTTPS links provided by Google, for example:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

Google actually provides some links that support the HTTPS protocol; we just need to find the corresponding link.

3. Disable Mixed Content

If your website uses HTTPS but some resources are loaded over HTTP, try disabling mixed content:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

This will automatically upgrade HTTP requests to HTTPS, resolving the issue.

4. Use a CDN

The final method is to use a CDN, such as the Google Fonts CDN:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">
<script>
WebFont.load({
google: {
families: ['Roboto:300,400,500,700']
}
});
</script>

Loading resources through a CDN avoids the limitations of the HTTPS protocol and improves website loading speed.

Conclusion

In website development, encountering stylesheet loading issues is not uncommon, especially when using external resources. The widespread use of the HTTPS protocol has increased our focus on website security, but it also requires addressing the new challenges it presents.