Google Chrome Extensions with Typekit Fonts

Question

I've recently started creating chrome extensions, but unfortunately I've had no luck with introducing typekit fonts directly into the extension.

Has anyone had any experience or luck in doing so? Any help would be much appreciated.

Answer 1

There are two hurdles to be taken before a Typekit font can be used in a Chrome extension:

1. By default, Chrome prevents external scripts from being loaded in the extension's process.
2. Chrome prevents inline scripts from being executed.
3. Typekit will reply with 403 Forbidden, unless the correct Referer header is set.

---

I uploaded the source code of a demo to https://robwu.nl/typekit-demo.zip. To see that the extension works, open the options page of the sample extension.

---

For the next example, I have created a Typekit kit with the following settings:

To fix the first problem, edit your manifest file and relax the Content Security policy:

"content_security_policy": "script-src 'self' https://use.typekit.net; object-src 'self'"

To solve the second issue, move the loader to an external file. Your extension page should look like this:

 <script src="https://use.typekit.net/ekl0khv.js"></script>
 <script src="load-typekit.js"></script>

// load-typekit.js
try{Typekit.load();}catch(e){}

To solve the last issue, you need to modify the Referer header. This bit of code requires the webRequest, webRequestBlocking and *://use.typekit.net/ permissions in the manifest file; chrome.webRequest.onBeforeSendHeaders is used to modify the headers.

// background.js
chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    var requestHeaders = details.requestHeaders;
    for (var i=0; i<requestHeaders.length; ++i) {
        if (requestHeaders[i].name.toLowerCase() === 'referer') {
            // The request was certainly not initiated by a Chrome extension...
            return;
        }
    }
    // Set Referer
    requestHeaders.push({
        name: 'referer',
        // Host must match the domain in your Typekit kit settings
        value: 'https://hjdaoalallnjkokclafeljbcmpogfiig/'
    });
    return {
        requestHeaders: requestHeaders
    };
}, {
    urls: ['*://use.typekit.net/*'],
    types: ['stylesheet']
}, ['requestHeaders','blocking']);

Minimal manifest.json

This is the minimal manifest.json file for getting the extension to work. background.js is referenced in the previous section.

{
    "name": "Name of extension",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "*://use.typekit.net/*",
        "webRequest",
        "webRequestBlocking"
    ],
    "content_security_policy": "script-src 'self' https://use.typekit.net; object-src 'self'"
}