Google fonts is typically served via a link tag, you might load a stylesheet such as:
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
In order for
Content-Security-Policy to even load this CSS file, you will need to add
fonts.googleapis.com to your
Your policy might look like this:
Without such a policy, we would get an error in our browser, for example:
Refused to load the stylesheet 'https://fonts.googleapis.com/css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Next we need to use a
font-src directive to allow the actual font-face source file. In the case of Google fonts these font files are served from
fonts.gstatic.com, this means we need the following in our content security policy:
Without this we might get an error in the console such as:
Refused to load the font 'https://fonts.gstatic.com/s/font-name/v16/file-name.woff2' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
Content-Security-Policy header for Google Fonts might look like this:
Content-Security-Policy: default-src 'self';font-src fonts.gstatic.com;style-src 'self' fonts.googleapis.com