Typekit fonts from Adobe Creative Cloud

rp-7
#1

I have some fonts from Adobe Creative Cloud. I have selected and installed a few for web and desktop use (Proxima Nova for instance). I’m able to select them in Photoshop, Illustrator and even in Microsoft Office applications. The fonts however are not listed in the font menu of Axure.

How do I select them if they are not listed?

I know I can setup WebFont mapping during export to have them display on the prototypes, but not quite sure how to specify them in the app if they are not in the select list.

Please help…
Using Axure Pro 7.0.0.3145

#2

No ideas?
This is a pretty solid point of frustration…

#3

I’ve been able to do this without a problem. I used the Desktop sync with Typekit to get the font installed on my desktop. The font showed up in Axure’s list of fonts, although I had to restart Axure before I saw it. I’m using Proxima Nova too.

Now I’m trying to figure out how to use Typekit’s web fonts in my Axure prototype… hmm.

#4

I’ve not had any problems with Typekit fonts appearing in Axure. Although I did need to restart Axure after Creative Cloud completed syncing the new fonts.

I haven’t worked out how to link them in the prototype though, since Typekit provides me a javascript embed code, whereas Axure only lets me enter a link to a css file or an @font-face code.

#5

I am trying to use the fonts I have with Typekit so they appear in a prototype I have created but for the life of me I cannot figure out how to get these working. Where are you adding the javascript embed code so that your fonts appear correctly?

Thanks.

#6

Also hoping to use a typekit font in an online prototype. Just adding to this thread in hopes it gets some attention. In the interim, will use a fallback google font i guess.

#7

I believe you add the code to Axshare as a widget that you add to the head of your project pages. I can get the code to appear in the Axshare rendered pages, but the fonts don’t render on my designs.

#8

I have tried doing this with TypeKit and have not had success yet.

The issue seems to be that the Axshare widget containing the TypeKit script needs to be earlier in the head tag. I was able to test this successfully by rendering the HTML to my own web server and then adding the Typekit script as the first script in the head tag.

Here’s what I’ve done:

  1. Create an Adobe Typekit “kit”, add the font “Proxima Nova”, and associate it with the domain of my Axshare prototype (e.g. - xyz1234.axshare.com)

  2. Open my prototype file and in the HTML publishing settings > font mapping I add “Proxima Nova” should be associated with ‘proxima-nova’.

  3. Publish to Axshare.

  4. On Axshare.com, I go into the project and add a widget. I have tried the standard and advanced TypeKit code. I set the widget to add the code to the header and included on all pages.

  5. I republish the local file to Axshare one more time just in case there’s some sort of process that needs to happen to pick up the widget.

  6. I open a test browser in an OS that doesn’t have the font locally installed.

Result: I can inspect the text and see it is set to be Proxima Nova, but it renders as if the font is not there.

I’d love to hear if anyone else has gotten to this work or could help resolve this. :thumbup:

#9

Still waiting patiently for this feature. Any predictions ?

Thank’s In Advance.

Asa.

#10

Hi all,

I just wanted to chime in with an update on this. Currently, you can implement Typekit fonts into your project with the use of AxShare plugins.

However, in order to use Typekit fonts locally in Axure RP, you will need to have access to a Mac. Unfortunately, in our testing we’ve found that fonts handled by Adobe Creative Cloud work in the Mac version of Axure RP, but not the PC version.

For PCs, the underlying problem is a lack of support on the part of Typekit for .NET applications using WPF (Windows Presentation Foundation)–of which Axure RP is one. We have this issue filed with our development team, but ultimately, this may not be technically possible for us to address from our side. It may be up to Typekit to implement support for WPF before you’ll be able to enjoy an integration on the PC side.

If you are using a Mac and would like to use a Typekit font in your project, here are some general instructions for how to do that:
  1. Go to Typekit, locate the fonts you want to use, and sync them to your desktop using the Creative Cloud application so they can be used in Axure RP. Here is an article from Typekit’s website that explains how to do this.

You may need to restart Axure RP in order to see your fonts listed.

  1. Once you’ve used the fonts in your project, go ahead and publish it to AxShare.

  2. Create and publish a “kit” with your font and associate it with the domain for your AxShare project (this will use your project’s 6-character AxShare ID–i.e. YOURID.axshare.com). Here’s more information on how to create and publish a kit.

The instructions will also include a section about the embed code–you’ll use this in step 7. For now you just need to create and publish the kit.

  1. In Axure RP, you’ll want to map your font to its proper font-family using the “Font Mapping” tab of the Generate HTML dialog. You can find the font-family listed in the Adobe Typekit Editor with a “.tk-” at the beginning of it. For example, I used Sanvito Pro, which has a font-family of “sanvito-pro” as seen in the screenshot below.

00000181.png1566×960

  1. Re-publish your project to AxShare so the font mapping is included

  2. Log into AxShare, choose your project name from the list, and add a plugin

  3. Name your plugin, leave the location as “End of the head”, and in the content box, paste the embed code given to you in the kit editor

  4. Add the plugin to any pages featuring the Typekit font and save the plugin

Now you can test out your AxShare project on a computer without the font installed to make sure it works!

Font embedding with @font-face (Axure 7 Web Fonts)
#11

Thank you! :bow:

#12

Julie, thanks for the detailed answer!

One other tip:

If you have the font on your computer and you want to see it when you do a local preview, do the font mapping as follows:

font-mapping.png786×221 14.9 KB

That will produce the following CSS, which will work nicely whether you’re viewing the page locally or on Axshare:

font-family: “proxima-nova-condensed”,“Proxima Nova Condensed”;

#13

Amazing, thorough advice. Thanks Julie

#14

Hi group,

Having an issue with Typekit that I’m hoping someone can help with. I’m using it for Proxima Nova and it works well for regular and bold font weights, however it is not working with semibold for some reason.

Here’s what my preview options looks like in Axure:

And here’s my Typekit:

Screen Shot 2017-04-26 at 10.56.54 AM.png616×775 64.2 KB

Thanks in advance!
-Adam

#16

Try adding a separate font mapping for semibold. In the new mapping select the “Choose a specific typeface” checkbox and select Semibold. Then add the appropriate font-family and below that you can set the font weight/style to ensure it’s semibold.

unlisted #21