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.

Spiritual

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'"
}

Lavella

Great answer, thanks for the response. I haven't had time to test this out but I'll accept and upvote. – Spiritual

This is a good idea but it didn't work for me. I installed the zip in Chrome as an unpacked extension. When viewing the Options page I get the following JS error: Failed to load resource: the server responded with a status of 403 (Forbidden). Just to be sure, I also set up my own Typekit test with to be positive everything was published correctly. – Pentaprism

@DylanValade The method still works. I had a typo in the manifest file of the zip file. I've uploaded a new zip file, try again (or copy the code from the answer). – Lavella

When I integrate your solution into my extension, I receive this error when I install the extension: The 'webRequest' API cannot be used with event pages. I change webRequest to declarativeWebRequest (per #13326605) but declarativeWebRequest is beta and I then get a 403 (Forbidden) – Polygon

@Polygon Just insert the fonts directly in your extension (if licensing permits). – Lavella

@RobW Unfortunately, the font I need is only available through TypeKit. So, no way of direct insertion, unless I'm missing something. – Polygon

@Polygon It is trivial to extract the fonts from typekit (just use the devtools to follow the network requests), but again, beware of licensing issues. – Lavella

@RobW I get what you mean. Figuring out the licensing will be the hardest part of this integration now. Thanks for that tip. – Polygon