font-src

The font-src directive specifies valid sources for web fonts loaded using @font-face. This directive is crucial for controlling which font sources your web application can load, helping to prevent potential security risks associated with malicious font files.

Recommended Values

Basic font-src configuration

Content-Security-Policy: font-src 'self' https://fonts.gstatic.com;

Tips & Tricks

  • Use 'self' as the primary source to load fonts from your own domain

  • If using web fonts, explicitly list the trusted font providers

  • If font-src is not defined, the default-src directive will be used.

Possible Values

  • 'none': No font sources are allowed
  • 'self': Only fonts from the same origin are allowed
  • URLs: Specific domains or paths (e.g., https://fonts.googleapis.com)
  • Schemes: Protocol schemes (e.g., https:, data:)
  • Wildcards: * for subdomains (e.g., *.fonts.googleapis.com)

Example Configurations

Example policy

CSP Header

Content-Security-Policy: font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;

Allowed

/* allowed as fonts.googleapis.com is allowed */
@font-face {
font-family: 'Roboto';
src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
}

/* allowed as self origin is allowed */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
}

Blocked

/* blocked as the domain is not authorized */
@font-face {
font-family: 'MaliciousFont';
src: url('https://malicious-site.com/font.woff2') format('woff2');
}

/* blocked as data URI is not allowed */
@font-face {
font-family: 'DataFont';
src: url('data:font/woff2;base64,...') format('woff2');
}

Additional Information

  • The font-src directive is essential for web applications using custom fonts
  • If not specified, the default-src directive will be used as a fallback
  • Be cautious when allowing external font sources as malicious font files can be used for attacks

Related Resources

External Articles

Related Documentation Sections