Tag: Localhost

Using Typekit CDN Web Fonts Locally While Offline (No Internet Connection)

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.

<script type="text/javascript" src="//use.typekit.net/lfz0vxv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

view raw
page.html
hosted with ❤ by GitHub

This JavaScript file is responsible for loading the CSS that contains the font data from Typekit’s CDN (the URL is set in line 9 – “f”:”//use.typekit.net…”). So the first thing to do is download this file and save it locally.

/*
Original
https://use.typekit.net/lfz0vxv.js
*/
/*
* For font license information, see the CSS file loaded by this JavaScript.
*/
if(!window.Typekit)window.Typekit={};window.Typekit.config={"c":[".tk-freight-sans-pro","\"freight-sans-pro\",\"Helvetica\",\"Arial\",sans-serif"],"f":"//use.typekit.net/c/7302fd/1w;freight-sans-pro,1,TJ9:N:i3,TJF:N:i5,TJ8:N:n3,TJB:N:n4,TJD:N:n5,TJG:N:n6/{format}{/extras*}?3bb2a6e53c9684ffdc9a9bf11e5b2a6273d805f491df729128ca517d0b865e0e191e7b5aee445efc6d4ab4dc94e67aefe35eac8915e2de0959b2bb14cb74eb97243001a4e12199258e040dfe98f737ffac5827d670b2821c337b4c001b82bb67b53127b8ef655ac395a8807eadc56b96dfce3ebaeaf23eda54a42b78fd6598bf206c475067f1648d3f4fcce42c1c8687de1fd8c8d7fdc3934dc65b290046cea982d0a7ac4abb5c8f802f88867e69","fn":["freight-sans-pro",["i3","i5","n3","n4","n5","n6"]],"k":"//use.typekit.net/{id}.js","p":"//p.typekit.net/p.gif?s=1&k=lfz0vxv&ht=tk&h={host}&f=10954.13456.13457.13458.13459.13460&a=671597&_={_}","w":"lfz0vxv"};
/*{"k":"1.7.0","created":"2014-01-09T10:53:52Z"}*/
;(function(window,document,undefined){
[…JAVSCRIPT STUFF...]
})(this,document);

view raw
lfz0vxv.js
hosted with ❤ by GitHub

The next step is to grab the CSS file that’s specified in the JavaScript file (the use.typekit.net address in line 9).

/*
Original
https://use.typekit.net/c/7302fd/1w;freight-sans-pro,1,TJ9:N:i3,TJF:N:i5,TJ8:N:n3,TJB:N:n4,TJD:N:n5,TJG:N:n6/d?3bb2a6e53c9684ffdc9a9bf11e5b2a6273d805f491df729128ca517d0b865e0e191e7b5aee445efc6d4ab4dc94e67aefe35eac8915e2de0959b2bb14cb74eb97243001a4e12199258e040dfe98f737ffac5827d670b2821c337b4c001b82bb67b53127b8ef655ac395a8807eadc56b96dfce3ebaeaf23eda54a42b78fd6598bf206c475067f1648d3f4fcce42c1c8687de1fd8c8d7fdc3934dc65b290046cea982d0a7ac4abb5c8f802f88867e69
*/
/*{"c":"2014-10-30T14:18:23Z","s":"prod-origin-fd43d310","v":"9b86fd"}*/
/*
* The Typekit service used to deliver this font or fonts for use on websites
* is provided by Adobe and is subject to these Terms of Use
* http://www.adobe.com/products/eulas/tou_typekit. For font license
* information, see the list below.
*
* freight-sans-pro:
* – http://typekit.com/eulas/000000000000000000010b59
* – http://typekit.com/eulas/000000000000000000010b5d
*
* (c) 2009-2014 Adobe Systems Incorporated. All Rights Reserved.
*/
@font-face {
font-family:"freight-sans-pro";
src:url(data:font/opentype;base64,[…FONT DATA…]);
font-style:italic;font-weight:300;
}
@font-face {
font-family:"freight-sans-pro";
src:url(data:font/opentype;base64,[…FONT DATA…]);
font-style:italic;font-weight:500;
}

view raw
fonts.css
hosted with ❤ by GitHub

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:

https://use.typekit.net/c/7302fd/1w;freight-sans-pro,1,TJ9:N:i3,TJF:N:i5,TJ8:N:n3,TJB:N:n4,TJD:N:n5,TJG:N:n6/d?3bb2a6e53c9684ffdc9a9bf11e5b2a6273d805f491df729128ca517d0b865e0e191e7b5aee445efc6d4ab4dc94e67aefe35eac8915e2de0959b2bb14cb74eb97243001a4e12199258e040dfe98f737ffac5827d670b2821c337b4c001b82bb67b53127b8ef655ac395a8807eadc56b96dfce3ebaeaf23eda54a42b78fd6598bf206c475067f1648d3f4fcce42c1c8687de1fd8c8d7fdc3934dc65b290046cea982d0a7ac4abb5c8f802f88867e69

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.

<script type="text/javascript" src="{% static 'offline/typekit.js' %}"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

view raw
page.html
hosted with ❤ by GitHub

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/”).

/*
* For font license information, see the CSS file loaded by this JavaScript.
*/
if(!window.Typekit)window.Typekit={};window.Typekit.config={"c":[".tk-freight-sans-pro","\"freight-sans-pro\",\"Helvetica\",\"Arial\",sans-serif"],"f":"/offline/fonts/","fn":["freight-sans-pro",["i3","i5","n3","n4","n5","n6"]],"k":"//use.typekit.net/{id}.js","p":"//p.typekit.net/p.gif?s=1&k=lfz0vxv&ht=tk&h={host}&f=10954.13456.13457.13458.13459.13460&a=671597&_={_}","w":"lfz0vxv"};
/*{"k":"1.7.0","created":"2014-01-09T10:53:52Z"}*/
;(function(window,document,undefined){
[…]
})(this,document);

view raw
typekit.js
hosted with ❤ by GitHub

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/”).

from __future__ import absolute_import
from django.views.generic import TemplateView
class FontsView(TemplateView):
template_name = 'offline/fonts.css'
content_type = 'text/css'

view raw
fonts.py
hosted with ❤ by GitHub

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.

Connecting to a Local Django Server from VMware Fusion on OS X

Even though we’d all like to believe that IE is dead and there’s no need to test it any more, that simply isn’t the case yet. But debugging via a remote server is a pain when you can easily use a local Windows VM running on VMware Fusion.

The following will get you up and running with a local Django server (running on port 8000) and any Windows OS. Note that I’m using the latest VMware Fusion (version 6) but the same steps will work with previous versions as well.

First, shutdown the VM (power it off completely) and then open it’s settings. Click Add Device, select Network Adapter and click Add.

Now you’ll see 2 network adapters for the VM. Click the new one to edit it.

Switch the connection type to Private to my Mac.

Next, grab the IP address your Mac is using for this private network. Open a terminal window and run “ifconfig vmnet1”.

$ ifconfig vmnet1
vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:01
inet 172.16.85.1 netmask 0xffffff00 broadcast 172.16.85.255

The last line is the important one. Make note of the IP address next to inet, in this case mine is 172.16.85.1. Because we made a new private network, this IP should hopefully stay the same and you won’t have to worry about messing with the configuration again down the road.

Next, start your Django server using the IP address 0.0.0.0:

$ python manage.py runserver 0.0.0.0:8000

Now start the VM back up and open up IE or your browser of choice. Go to http://172.16.85.1:8000 (make sure to substitute the IP address you made note of above). Voilà, you’re browsing your local Django server from Windows.

If you’d like to use something more memorable for the host name, go ahead and edit the Windows host file (it can be found here – C:\Windows\system32\drivers\etc\hosts). Add the new host to the list of entries:

127.0.0.1      localhost
172.16.85.1    mysite.local

I found that xxxx.local worked reliably while other host names were hit and miss.

Finally, flush the DNS on your VM for the host changes to take effect:

ipconfig /flushdns

You can now reach your Django site at http://mysite.local:8000.