---

Example Policy

Assume a Content-Security-Policy header is set with the following policy:

font-src 'self' https://cdn.example.com;

Allows

With the above CSP policy, fonts can be loaded from the same origin (via the 'self' source list value), or via URLs starting with: https://cdn.example.com

@font-face {
  font-family: 'MyLocalFont';
  src: url('/fonts/font.ttf');
}
@font-face {
  font-family: 'ExternalFont';
  src: url('https://cdn.example.com/fonts/font.ttf');
}

Blocks

The above policy will block any font not same origin or via https://cdn.example.com, so the following would be blocked:

@font-face {
  font-family: 'BlockedByCSP';
  src: url('https://other.example.com/fonts/font.ttf');
}

Inherits from default-src

If you don't specify a font-src but do specify a default-src CSP directive, then the value of default-src will be used as the policy for font-src. So for example if you had the following policy:

default-src 'none'

When you try to load a font via a CSS @font-face you would get an error like this in the console:

Refused to load the font '<url>' because it violates the following content security policy directive: "default-src 'none'". note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Browser Support for font-src

The CSP font-src directive has been part of the Content Security Policy Specification since the first version of it (CSP Level 1).

Internet Explorer 11 and below do not support the font-src directive. This means that IE11 will simply ignore the policy and allow fonts to load from anywhere (as if a policy had not been set at all).

---