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: https://fonts.google.com/ 
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








0 comments:

Post a comment