Developing Locally with Typekit, Xip.io, and Browsersync

Recently I ran in to an interesting problem. When you initialize a new "kit" on typekit you are prompted to enter a list of domains that your kit will be allowed to function properly on. Typically you would enter the address of your live site (e.g. 'http://example.com') as well as an address for local testing (e.g. '192.168.1.10' or 'localhost'). Neither of these options for local development worked for me. Managing a list of LAN addresses would be foolish (and probably impossible) on a large team where people are working from different locations. Simply stating localhost would prevent fonts from being previewed on other devices with a tool like BrowserSync, Ghostlab, or Adobe Edge Inspect which all rely on your computer's LAN address.

Typekit kit creation prompt

In my moment of need I turned to twitter and thankfully Chip Cullen answered my call:

Some of the developers at 37signals developed a custom DNS tool named xip.io to deal with similar problems. You can use xip to "trick" your browser in to thinking an address like www.10.5.3.15.xip.io or 10.5.3.15.xip.io is 10.5.3.15. All you have to do after this is add *.xip.io to your typekit "kit" settings and you're good to go.

Typekit kit creation prompt

Bonus

After solving this, I discovered I was running in to another problem: the .xip.io suffix was interfering with live reloading in Browsersync (my preferred device syncing tool: fully featured, open source, *nix agnostic). Shane Osborne, the maintainer of Browsersync responded to my feature request very promptly and there is now an option to append whatever suffix you like to your IP address. Here is an example of adding the option to your gruntfile:

    browserSync:
        serve:
            options:
                hostnameSuffix: ".xip.io"