2

I'm getting a bunch of Content Security Policy errors in Electron developer console for adding google font :

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

I'm using electron-forge's React with TypeScript boilerplate.

James Z
  • 12,209
  • 10
  • 24
  • 44
Sharukh Rahman
  • 327
  • 3
  • 12
  • I ended up downloading the fonts and loading them [from the project](https://stackoverflow.com/a/60480083/2065702). – Zach Saucier Nov 16 '21 at 22:12

1 Answers1

4

Easiest way would probably be to set a Content-Security-Policy meta tag in the header of your template like this:

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta 
        http-equiv="Content-Security-Policy" 
        content="default-src 'self'; 
          script-src 'self'; 
          font-src 'self' https://fonts.gstatic.com;
          style-src 'self' https://fonts.googleapis.com">
    <!-- ...other stuff... -->
</head>

Guide on how to use these is here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#multiple_content_security_policies

I'm currently in my first hours of electron myself, without react for now, and that's how I got around it and I think that's how you're supposed to do it.

Ruu
  • 56
  • 3
  • 1
    This 100% worked for me instantly. Just to be clear, pairing it with the following in my style.css sheet for anyone interested: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { font-family: 'Poppins', sans-serif; } – dbrree Jan 29 '22 at 15:50
  • I did copy pasted the exact meta tag you provided but did not worked – KALITA Feb 06 '22 at 18:15