The Content Security Policy (CSP) is a means for restricting which scripts and resources are allowed on your website. You could, for example, use CSP to stop external scripts from being executed on your website.

CSPs are not recommended for use with Typekit

While it is possible to use a CSP with Typekit on the same page, we currently do not recommend it, because the CSP policy does not allow you to set an exception for inline styles added by a script from a specific domain. If you specify an unsafe-inline exception for styles, it will apply to all styles from all domains.

Typekit uses inline styles and fonts as data URIs to provide our service, and making exceptions for these negates a lot of the protection provided by a CSP. We hope this limitation will be corrected in future versions of the Content Security Policy specification.

Using a CSP with Typekit

If you do wish to use a CSP with Typekit, follow these instructions to properly set your security directives. Take care, as failure to properly follow all of these instructions could result in an inadvertent violation of the Terms of Use for the Typekit service.

  1. The first directive is to allow scripts to load from our CDN, use.typekit.net:

    script-src 'self' use.typekit.net;
  2. Next, you need to allow stylesheets from use.typekit.net and specify unsafe-inline to allow scripts from all domains (including use.typekit.net) to use inline styles. This is required for font events to work.

    style-src 'self' 'unsafe-inline' use.typekit.net;
  3. To allow fonts to load, you also need to include the font-src directive.

    font-src 'self' use.typekit.net fonts.typekit.net;
  4. The final requirement is an exception for images from p.typekit.net. Typekit uses a tracking image from this domain to calculate font usage and pay foundries appropriately for the use of their fonts.

    img-src 'self' p.typekit.net;
  5. Optionally, you can add an exception for our performance metrics. Performance metrics are sent at random intervals and are used to monitor the performance of our font network.

    connect-src performance.typekit.net

You should combine these directives into a single policy and set the Content-Security-Policy header on all your HTTP(S) responses. To support older versions of Chrome, Firefox, and Safari, you’ll also need to include the X-Content-Security-Policy and X-WebKit-CSP headers. For more information, please refer to the W3C CSP specification.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy