How to Embed Fonts in Axure prototypes

Axure logo

While working in different kind of operating systems (like iOS, android) or client’s designers have some constraints of using any specific ‘Font-family’. iOS have its own default font family, sometimes client companies have their own style guide for using default fonts. If you are designing prototype in Axure then knowledge of fonts is recommended for you and how to embed any specific font family in your prototype is required for seamless experience. In this article you can have step by step guide in ‘Embedding custom font family in Axure prototype’.

Step 1. Select font which you want to embed in Axure prototype. Let’s say we want to embed ‘Open Sans’ font family.

Step 2. Get the ‘Source URL’ of font from ‘Google free fonts’ of similar other sources.
Google fonts: 
Search – Font name and Select. Once you select you will be able to get link of font (see below image).

Google Fonts

Free UX ebook

Step 3. Now open Axure prototype and go to Publish> Generate html.

Axure RP Tool screenshot

Step 4. Select ‘Web fonts’ tab and add font by clicking on ‘+’ icon below.

Axure RP Tool screenshot

Step 5. Enter the Font name (keep font name exact same with source URL). Enter URL of web font, keep ‘Link to .css file’ as selected.
 Till yet we have done linking of our custom font in our prototype. Now we have to map fonts which we are using in prototype to this (open sans) font. 

Axure RP Tool screenshot

Step 6. Go to ‘Font Mappings’ and click on ‘+’ to add new mapping. Select any font which you want to change in your custom font in ‘Font’ field and enter exact name of custom font family in ‘font-family’. Let’s say we want to replace all the text having ‘Arial’ font in to our font (open sans).

Axure RP Tool screenshot

Step 7. And finally generate prototype and run. You will be able to view your custom font in prototype.

Hope this guide help you in working in Axure prototyping tool. Below are some good recommended online courses which can help you in learning about Axure tool.

Udemy Axure course

Udemy Axure course

Udemy Axure course

About Author

UX Author Abhishek Jain

Abhishek Jain
Design Lead UX Researcher
Co-founder of UXness
LinkedIn | Email


Post a Comment

Popular Posts