Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Fonts violates Content Security Policy

I'm trying to use Google Fonts and I've never had any problems, but now when I try to add the CSS file on my header I get this error on the console:

Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Whatever' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

like image 505
José María Avatar asked Nov 29 '15 16:11

José María


People also ask

Are Google fonts OK for commercial use?

Yes, you can use them commercially, and even include them within a product that is sold commercially. Usage and redistribution conditions are specified in the license. The most common license is the SIL Open Font License.

Are Google fonts secure?

Google Fonts are completely safe to use to enhance the design of your website. But, the extra HTTP requests to an outside server could slow down your page loading speed.

Are Google Fonts legal?

Yes, you can use Google Fonts and be GDPR compliant. The only time Google Fonts breaches the GDPR terms is when visitors need to send Google their IP address to request Google Fonts files.

Are all Google fonts free for commercial use?

All fonts are released under open source licenses. You can use them in any non-commercial or commercial project.


2 Answers

There are two things to fix here:

  • Use https for the Google fonts link (https://fonts.googleapis.com/css?family=Whatever)
  • Authorize https://fonts.googleapis.com in style-src directive and https://fonts.gstatic.com in font-src directive: "style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
like image 115
Rolinh Avatar answered Oct 06 '22 03:10

Rolinh


If you're like me and a little confused because every answer is just saying you need to authorize a URL in a style-src directive without showing how to do it, here's the full tag:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"> 
like image 28
Owen Avatar answered Oct 06 '22 03:10

Owen