I’ve got an important demo coming up in a few weeks (more on that at a later date) and like any good presenter, I’m going to assume that things won’t work. WiFi will be slow or non-existant (maybe I won’t upgrade to Yosemite just yet), my local web server will mysteriously stop responding and I’ll drop my laptop on the way there.
So at a minimum I’ll need two computers prepped with a site that will run 100% correctly without an internet connection. A backup screencap of the demo is probably a good idea as well.
For the majority of the application, running offline won’t be an issue – point the config files at a local database, turn off the CDN, etc. But there’s one resource that is strictly web-based – Adobe’s Typekit. As of this writing they only provide CDN access to the fonts so you can’t simply download the font files and use them.
Presenting without the fonts is not an option so either I purchase the actual font files for a few hundred bucks or I figure out how to hack Typekit.
Obviously I’m going with option two so here we go…
If you’ve used Typekit before, you’ll be familiar with the following snippet they provide to add fonts to your site.
UPDATE: It appears that Typekit has changed the way the CSS file is loaded. You’ll need to use a tool such as Chrome’s network inspector to retrieve the full URL to the file. It will look something like this:
Now we’ve got the two files necessary to render the fonts, but we need to do a couple things before they’ll actually work.
First we need to update the HTML snippet to point to our local JS file.
Next edit the JS file so that it points to the local version of the CSS file (specifically, set the following to your local path – “f”:”/offline/fonts/”).
The important thing to note here is that I haven’t pointed directly to the CSS file (i.e. “f”:”/offline/fonts.css”). Unfortunately the JS file adds a slash to that URL based on some regex which prevents it from loading (i.e. /offline/fonts.css/).
So rather than figure out what to edit in the JS, I simply set up a new view in Django to serve the file at a path with a slash at the end (i.e. “f”:”/offline/fonts/”).
With that in place, I can now run the site completely offline without depending on Typekit’s CDN for font delivery.
And one last note, don’t forget to set Typekit to allow your local domain as explained here.