title: Adding google fonts (fonts.googleapis.com) to CSP header
body: <p>I am hosting a personal project on gitHub pages, and using cloudflare to enforce https. Now I would like to implement a CSP policy.</p>
  
  <p>I tried adding meta tag to the head of my page:</p>
  
  <pre><code>&lt;meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;"&gt;
  </code></pre>
  
  <p>But I am getting the following error:</p>
  
  <blockquote>
    <p>Refused to load the stylesheet
    '<a href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="noreferrer">https://fonts.googleapis.com/icon?family=Material+Icons</a>' because it
    violates the following Content Security Policy directive: "default-src
    'self' <em>.fonts.googleapis.com/</em> <em>.cloudflare.com/</em>
    <em>.fonts.googleapis.com/</em>". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.</p>
  </blockquote>
  
  <p>This are the scripts that I am including:</p>
  
  <pre><code>  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet"&gt;
  </code></pre>
  
  <p>won't setting <code>*.fonts.googleapis.com/*</code> allow everything from the page?</p>
  
  <p>Since this is the first time I am setting a CSP is this the correct way to set it for github pages? I have not found any reading on this yet.</p>