Using This Tool

At Thinking.Studio we use a tool called Axure to deliver great interactive prototypes for our clients (and their users). Prototypes are a way to try using functionality before we develop fully blown applications. Actually, we use it a LOT.

One problem we found when using Axure is that, while we design a prototype with a specific font, when we publish the prototype for the client to view it online, it would often look incorrect since the client didn’t have the fonts we used on their computer. To work around this problem, it is possible to embed fonts into the prototype. But it’s not easy to do at all.

If you’re using Axure, then this should save you some heartache the next time you need to publish your prototype for a client.

First you should select 'Generate HTML Files' by clicking on the Publish button on the top right in Axure.

Then, you should select 'Web Fonts' from the left hand side options.

Now, select the @FontFace radio button. Switch to this tool and follow the prompts on the right hand side to generate and copy your CSS FontFace code. Once you have created the code and copied it, come back to this dialog box and paste it in.

Finally, you should select 'Font Mappings' from the left hand side options. Here you should be able to enter the name of the font. Font names are a bit troublesome. They are not the same as the filename on disk. Instead, to get the right font name you would need to PREVIEW the font with your own font viewer to get the corrent name. You should use that name in the tool as well as in your Axure font mappings.

Step1: Choose your font file

(Use TTF or OTF files)

Step2: Fill your font name

Step3: Submit and wait


Step4: Confirm the font face

1234567890 AaBbCcDd...Zz

Step5: Copy the css config bellow