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).
Step 3. Now open Axure prototype and go to Publish> Generate html.
Step 4. Select ‘Web fonts’ tab and add font by clicking on ‘+’ icon below.
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.
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).
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.
0 comments:
Post a Comment