4 Replies Latest reply on Dec 8, 2012 12:23 PM by aidan-foster

    Why don't TypeKit Fonts work with Edge Inspect

    1ndivisible Level 1

      I have a Typekit kit setup with localhost added to its allowed domains and all mobile options checked. Running the site locally on http://localhost:4567/ works fine. The fonts load and display correctly.

       

      However, when I connect an iPhone 4, 4s or iPad 2 using Edge Connect, the fonts do not load.

       

      How should I troubleshoot this? I've found technical note suggesting that republishing the kit should solve it, but it does not and it is a new kit anyway.

       

      I have tried adding the specific port to the allowed domains for the kit - /localhost:4567, but this has no effect.

        • 1. Re: Why don't TypeKit Fonts work with Edge Inspect
          Mark_Rausch Adobe Employee

          Hi, according to our dev who knows the most about TypeKit - in addition to “localhost:4567” , you also need to add <machine IP address>:4567 to allowed domains for TypeKit , click on Publish and  wait 10-15 minutes for propagation across the Typekit servers.

           

          Try that and let us know if you're good to go or not.

           

          Mark

          • 2. Re: Why don't TypeKit Fonts work with Edge Inspect
            aidan-foster

            I've got the same issue. OSX 10.6.8, with paid version of inspect. Mamp Pro as local server with livereload.

             

            Typekit settings: domain.com, *.domain.com, *.local:4567, 192.168.0.189, 192.168.0.101:4567, 192.168.0.189:4567

             

            Using 192.168.0.189 in chrome to "drive" 4th gen ipod touch (iOS5), 5th Gen (iOS6), HTC Dream (4.x Droid).

             

            Droid has typekit fonts, iOS devices don't. In iOS using safari fonts do work.

             

            Any suggestions?

            • 3. Re: Why don't TypeKit Fonts work with Edge Inspect
              1ndivisible Level 1

              Hi,

               

              Yes. You're in luck. Had a couple of very helpful people from Adobe support look into it and here is their final response in full:

               

              TLDR: It won't work out the box but there are good workarounds.

               

              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 Davids-rMBP.local, so I can browse to http://Davids-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.


              I personally use xip.io if I need to test Typekit on multiple devices using Edge Inspect. It's certainly not the easiest option to use, but it works quite well with almost no setup and it's free.

              1 person found this helpful
              • 4. Re: Why don't TypeKit Fonts work with Edge Inspect
                aidan-foster Level 1

                Thanks for the info!

                 

                So if I've got a static IP address at my studio. Should this work if I add my external IP (EG what's listed whatismyipaddress.com) to my typekit kit?

                 

                A.