Shadow + Typekit + localhost workflow

Using Adobe Shadow with Typekit for local development workflows

If you’re using Typekit in your web projects, this article will show you how to use Adobe Shadow to preview your Typekit webfonts on devices during your development workflows.

Note: This post assumes you already have a Typekit account, and have created a Typekit Kit.

Shadow and localhost

In order to preview http://localhost content on your Shadow devices, Shadow does a translation of the URL when instructing Shadow devices to preview your content. E.g., if your site is at http://localhost/~akishnan/meridien/index.html, before it sends the URL to Shadow devices, it replaces localhost with the IP address of the machine where Shadow is running. This is necessary because localhost is relative. In our example, Shadow would tell devices to go to http://192.168.1.104/~akishnan/meridien/index.html.

One of the side-effects of this translation is that Typekit fonts which are registered under localhost do not work on Shadow devices.

Let’s fix this, so everything works the way you want it to…

Add your IP address to your Font Kit Settings

  1. Login to Typekit
  2. In the top right, choose one of your Kits from the menu, then click Launch Kit Editor
  3. You will see your Type Kit Editor, click on Kit Settings in the upper right
  4. In the Domains field, add your current IP Address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension
  5. Click on Save Settings
  6. Click on Publish (wait 10-15 minutes for propagations across the Typekit servers)
  7. Click on Embed Code in the upper right, then copy and paste your code snippet inside the head tag in your web page(s). E.g.:

  8. try{Typekit.load();}catch(e){}

  9. Apply your Typekit font to html elements on your web page
  10. .fancyH2 {
    font-family: "cabazon";
    padding-top: 1em;
    color: #FFF;
    }

  11. Preview your page in Chrome. Shadow devices will now also display your Typekit fonts!

You can repeat this procedure to change your IP address and republish your Typekit Kit as often as necessary, with no penalties.

We hope you enjoyed this article, and welcome your feedback in the comments.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow

This entry was posted in Workflow enhancements and tagged , , , , , . Bookmark the permalink.

6 Responses to "Shadow + Typekit + localhost workflow"