Typekit does not work with Live Link (*.ngrok.io)

Due to ngrok.io changing the Live Link every day, I cannot see Typekit fonts on any Live Link URLs because *.ngrok.io is an invalid domain to use with Typekit. The only way I can find around this is to change the Typekit domain to the full Live Link every time it changes, which is not optimal at all. Anyone know a workaround for this?

Hi Brian,

If you’re showing the site to a client, I’d recommend using Connect to Flywheel and pushing the site to a Flywheel demo site. Once you do that, you can add the Flywheel site to TypeKit.

In case Connect isn’t your cup of tea, the next best thing to do is to sign up for a paid plan of ngrok and take advantage of their reserved [sub]domains.

Thanks @clay! My use case is to show colleagues BEFORE the site is ready to show clients (while still in development) so I guess I would have to go the latter route you suggested. How exactly would I set up a reserved subdomain to use with Live Link?

No problem!

Here’s how I’d go about it:

  1. Enable the Live Link in Local
  2. Browse to the site’s app/public/wp-content/mu-plugins directory and rename local-by-flywheel-demo-urls.php to something else so it’s not automatically deleted after the Live Link is disabled.
  3. Disable the Live Link
  4. Sign up for a paid version of ngrok (Basic should do the trick)
  5. Download and authenticate ngrok
  6. Create a new tunnel with ngrok. See Overview | ngrok documentation. The command will look something like
ngrok -subdomain=whateveryouwant http some-local-site.local:80 -host-header=some-local-site.local
1 Like

Thank you again, @clay! Very helpful! Much appreciated!

1 Like

Sorry to ask for more help on this, @clay but I guess I’m a bit over my head here.

I followed your instructions, but the error I get is “Incorrect Usage: flag provided but not defined: -subdomain”

Reserved subdomain created in my ngrok account and replaced “whatever-you-want” with the correct name. Replaced “some-local-site.local” with the correct local URL.

Any additional help you can provide is much appreciated. Thanks!

My bad, try putting the -subdomain flag after http. See Overview | ngrok documentation

Thank you, @clay! That got rid of the error and appears to be working but when I try to access mysubdomain.ngrok.io I get the Local site address but it shows “this site cannot be reached”. The console show 301 error. Any ideas?

Hmm… Is the Local file present in the Local site’s app/public/wp-content/mu-plugins folder?

The renamed one is. I’m supposed to leave the Live Link disabled, correct? I tried it both ways without success.

Yup!

Can you go to Admin » Plugins » Must Use in WordPress and make sure the plugin is showing there?


Also, can you provide a screenshot of the error you see when trying to access the ngrok URL?

The plugin is showing on the WP Admin side.

Here’s a screenshot of the console errors. For the browser (Chrome), it’s just the standard site cannot be reached/cannot access this IP error.

ngrok-screenshot

@bkmacdaddy,

Thanks!

So mysubdomain.ngrok.io redirects to whatever.local? Do you get a 301 when you visit whatever.local?

@clay

Yes, the ngrok reserved subdomain forwards to whatever.local, which then gives a 301. If I try to go to whatever.local directly I get the same 301.

Where does the .local site redirect to? Are you able to access it without error?

Are you able to access /wp-admin with the ngrok subdomain?

The .local site doesn’t redirect anywhere. I cannot access it except on my own computer (where it is running locally).

No, I cannot access /wp-admin with the ngrok subdomain from another computer.

Is there any way you can private message me the domains and the screenshots of the 301 in the network tab of your browser’s dev tools? I’m starting to get confused :sweat_smile:

Sure, if you can tell me how to pm you. The screenshots will take a minute.

Yup! Click on my name/avatar and then click “Message”

I tried that before my last post but I don’t see “Message” anywhere