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
6. Click ‘Add & Edit domains’, add AxShare prototype URL (and branded url if you have one)
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