10 steps to get Web Fonts in your Axure 7 prototype

October 17, 2013

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)

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.

8. Make sure to publish your changes

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:

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

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

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.

[…] 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 […]

[…] 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 […]