Chrome Throwing Content Security Policy Error on Google Fonts

Question

I've added the Google fonts URL to the font-src directive of my Content-Security-Policy header. I'm getting the following error in Chrome 42:

Refused to load the stylesheet 'http://fonts.googleapis.com/css?
family=Open+Sans:300,400,400italic,600,800|Source+Code+Pro' because it violates the
following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

My header field looks like this:

Content-Security-Policy: default-src 'self'; font-src http://fonts.googleapis.com;
style-src 'self' 'unsafe-inline'

Answer 1

The problem is that links to http://fonts.googleapis.com return stylesheets, not fonts. If you examine the stylesheet it pulls in you'll find several @font-face rules that pull fonts from http://fonts.gstatic.com.

To make this work properly, your Content-Security-Policy header should look something like:

Content-Security-Policy: default-src 'self'; font-src http://fonts.gstatic.com; 
style-src 'self' 'unsafe-inline' http://fonts.googleapis.com