Typekit as web font

Typekit fonts can now be embedded with CSS (it doesn’t need Javascript), so I would have guessed that I could use them in Axure in the same way as Google Web Fonts, i.e. Publish > Generate HTML Files > Web Fonts > add the css link.

These are the embedding instructions from Typekit…

So this is what I did in Axure (same process I use for Google Web Fonts)…

However, when I publish to Axshare and view on a device (my phone) where the font isn’t installed locally, it’s not displaying (I see a substitute font).

I understand I can achieve what I need via an Axshare plugin, but I believe I have to do this on a per-project basis, which is a bit of a nuisance (and easy to forget), as I create lots of projects. Would be easier to do it in Axure, same as Google Fonts.

Question is… can I embed Typekit fonts in the same way as Google Fonts, and if so, what am I doing wrong? Thanks!

Are there any errors in the browser?

When I try that url it says nothing found. That’s probably why it’s not working.

Thank you @nkrisc! Yes there were errors, and I traced it back to an issue with the way I’d set things up in Typekit. Fixed that, all working now. Nothing to do with Axure. Thanks for your help.

Just thought I would add to the conversation as I just spent a long time trying to figure this out for my own project. I think the issue for me was that I did not have the Kit set up properly. It was one that was used on another project, and adding the URL to it didn’t work. I ended up starting a new Kit altogether in Typekit. Make sure you’ve added the font you’ve selected from Typekit to your new kit, and have hit the “Publish” button in the Typekit Kit Editor screen. This step is really easy to miss! Once that is done, copy the embed URL from Typekit into Axure’s Publish > Web Fonts > Link to .css file (Without the style tags) For example: https://use.typekit.net/tkg7azw.css. Then publish or use Axure Share and it should be all set, with the font displaying properly. One other thing that I did was I created a Font Mapping from the menu font to the font family CSS Property. This was something someone had mentioned in another thread, but it’s actually vitally important. For example: Font: Myriad Pro (maps to) font-family: myriad-pro.