Can anyone help me with Content-Security-Policy?

Posted December 17, 2020 7.5k views

All I am trying to do is get google fonts working on my website.

The HTML I am using is:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self'; style-src 'self' 'unsafe-inline';">

The errors in firefox and chromium:

index.php:4 Refused to load the stylesheet '' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Which, I obviously didn’t set, both browsers are doing this on their own, default installation of both.

Here’s the header info from the website:

[Response Headers]
Request URL:
Request Method: GET
Status Code: 200 OK
Remote Address:
Referrer Policy: no-referrer-when-downgrade
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 17 Dec 2020 21:19:32 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: close
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self';script-src 'self' 'unsafe-eval' 'unsafe-inline';style-src 'self' 'unsafe-inline'
Content-Language: en
Cache-Control: no-cache, must-revalidate, stale-while-revalidate, max-age=0, private, no-transform
Pragma: no-cache
Expires: 0

[Request Headers]
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Cookie: PHPSESSID=xxx
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

I’m at my wits’ end with this any help would be greatly appreciated

edited by MattIPv4
1 comment
  • Everyone is just assuming I’m using HTTPS. I don’t even have it installed. And before you tell me “all sites should serve all content over HTTPS” that’s not my goals. But thanks for letting me know it’s a HTTPS issue. Only reinforces my views on browser/corporate power control schemes lol. :P

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
3 answers

I am the OP. Had this page still in my bookmarks heh. Just wanted to say I got this all working without using the garbage HTTPS. I got google fonts working on http: here but it took a lot of work getting around Content-Security-Policy without doing browser modifications.

I won’t want to say how I got it working properly because some control freak nerd will likely try to fix it or something. But I will say you can do this.

Hi there @ZenTiger13,

I believe that as your website is working over HTTPS, you need to load the resources from Google via HTTPS as well.

To do so just update the tag to:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self'; style-src 'self' 'unsafe-inline';">

Let me know how it goes!

Schemeless source will use Same Origin Policy to determine the scheme.
Therefore on HTTP-pages it will be and on HTTPS ones.
Hence on HTTPS:-pages the httpS:// source will not allow to load styles from

The policy style-src 'self' 'unsafe-inline'; will solve troubles with CSP but you meet a new trouble with mixed content (loading the style via http: on https: page).

Best way is to change scheme of load style to https in your HTML code: httpS://
This will work with your original CSP.