Question

When using Edge Inspect to test sites running locally, Typekit fonts are not downloaded or rendered.

I have added localhost to the allowed domains in my Typekit kit and also added my machine’s IP address.

The fonts render fine when viewed in a browser, just not on any devices.

Answer 1

I’m adding this answer as given by Adobe support in the hope it will help anyone else with this problem. The following is a direct quote:

When you’re browsing a local website via the hostname localhost,
which would not be accessible to any other devices on your network,
Edge Inspect automatically gets your machine’s local IP address (which
is not the same as the external IP as shown on sites like
whatismyip.com) and sends that to the mobile apps. For instance, let’s
say I have a Sinatra application running in Chrome on my Mac as
http://localhost:4567. My iPhone wouldn’t be able to understand the
hostname “localhost”, but it can see my Mac using its IP address
10.1.10.1, so Edge Inspect will navigate to http://10.1.10.1:4567.

So, to get fonts working, you could add both localhost and
10.1.10.1 to your kit. However, we don’t recommend adding local IPs
to kits because they tend to change without warning. (In my example
above, the next time I turn on my computer its IP could have changed
to 10.1.10.2, but all I would know is that fonts had stopped working
on my devices again.)

To work around this, we recommend using some form of “dynamic DNS” —
basically, a domain name that is automatically updated with your
current IP and therefore will always point to your computer.

If you’re using a Mac, the simplest thing would be to use your Mac’s
Bonjour hostname. Bonjour is a technology built into Mac OS X and iOS
to help devices find each other automatically over networks.

To find your Bonjour hostname:

1. Open System Preferences on your Mac.
2. Choose the Sharing icon.
3. Your Bonjour hostname will be displayed in the top area, under the “Computer Name” field.

You can add the hostname that appears there to your kit, and use it on
any Apple device on your network. For example, my Bonjour name is
Somename-rMBP.local, so I can browse to http://Somename-rMBP.local:4567 on
any Mac or iOS device and see my Sinatra app.

Unfortunately, this simple solution will only work on Apple devices or
Windows PCs with Apple’s Bonjour software installed — you can’t use
this hostname with Android phones or tablets. If you need a hostname
that will work on any device, there are a couple of options I’d
recommend:

1. A third-party service called Forward offers a way to easily forward ports from your computer to other devices anywhere on the internet.
   You can learn more about them and sign up for a 30-day trial here:
   https://forwardhq.com. Forward will give you a permanent domain name
   for your forwarded app that you can add to your kit, such as
   dev-yourcompany.fwd.wf.

2. 37signals has a free “wildcard DNS” service called xip.io that will automatically forward traffic to a local IP address. You can get your
   current local IP address by opening System Preferences, then choosing
   Network. The IP address should be shown in the small text underneath
   the connection status for whatever connection is active (i.e. has a
   green dot next to it). Once you have the IP, you can access your
   computer at [YOUR IP].xip.io. To get fonts working, add *.xip.io to
   your kit. Remember that your IP may change, so if your site stops
   being accessible you should check to make sure you have the correct IP
   address.