featured-v2

10 steps to get Web Fonts in your Axure 7 prototype

This example walk-through explains how you can pick a font from http://www.fonts.com and make it appear in your shared prototype.

There are a number of other ways to have a font of your choice in your prototype, like using a font converter to create a self-hosted web font. Besides the fact that that approach requires more technical know-how, some fonts are not accepted by the font converting tools, making it useless for a lot of clients. In this example walk-through I just wanted to focus on how to get the job done without any technical know-how required.

We’ve talked the talk, let’s walk the walk:

1. Sign up at http://www.fonts.com

2. Create a project within your account

4. Find a free font at fonts.com, add to your project.
(Or upgrade to Standard subscription for $10/mo for any other font)

5. Go to your fonts.com project

01

6. Click ‘Add & Edit domains’, add AxShare prototype URL (and branded url if you have one)

02

7. When you’ve added your domain(s), go back to the project pane and click ‘Publish options’ in the upper right corner. Open the tab for ‘Option 2: Non-Javascript’ and copy the url for the stylesheet. 
You’ll need the font-family names for step 10.

03

8. Make sure to publish your changes

04

 

9. Now, in Axure, click ‘Generate Prototype’ from the menu bar, select the tab ‘Web Fonts’.
– Click the green + icon to add a font
– Give it any name, make sure ‘link to .css file’ is selected and paste the copied CSS url in the field:

05

10. Select the tab ‘Font Mappings’
Now you are going to tell Axure which css ‘font-family’ should replace the prototype fonts.
– In the field ‘Font’, enter the font you are using in your prototype (you ‘local’ font).
– In the field ‘font-family’, enter the web-font name you want it to be replaced by. These were shown beneath the css url in the ‘Publish options’ of your project at Fonts.com

06

7 Responses to “10 steps to get Web Fonts in your Axure 7 prototype”

  1. Jochem

    Hi Revi!

    Thanks deze post gaan we hier zeker gebruiken voor onze prototypes!

    gr

    jochem

    Reply
  2. chris

    I’ve done everything exactly how you have showed us – and it’s not working… any ideas? I’m using Axure 7… I’ve been using it for 7 years.

    Wish some research…I’ve found that Axure is incorrectly naming the font in the CSS…naming the font “Museo300-Regular” rather than the correct name I inputted into Axure “Museo Slab W01 300″ – which is pretty shitty. Not sure why they do that.

    Reply
  3. Black Belt in Axure | Sangram Jadhav

    […] Neue (the font used by iOS, which is not standardly available for Windows). Take a look at the 10 steps to get web fonts in your Axure 7 prototype by Revi Körnmann for help using web fonts in your […]

    Reply

Leave a Reply