Have you ever published a wireframe in Axure RP Pro, only to have the dreaded “tofu” appear rather than the icon from your chosen icon font? Ever tried to use your favorite (or branded) font, only to have it default back to Arial? (Or worse, a sans serif font.)
For one of the major tools available for user experience professionals, it certainly has poor UX. Most designers and architects I’ve spoken with have had no idea Axure supports custom fonts. In this tutorial, I’ll show you how to include a custom webfont in Axure files.
How to Include Webfonts in Axure Files
Step 1: In Axure, Open Axure’s Publish Menu, Select “Generate HTML Files…”
Step 2: Next, click on “Web Fonts”
Step 3: Check out the generator if necessary (upper right corner); and hit the green plus sign to add a new Web Font
Step 4: Enter the font information
Some things to know:
- Fonts must be mapped to their matching webfont CSS file. You MUST name them and pair that name with the webfont CSS file. If you leave the name as “Web Font 1”, it will not work.
- You must use the EXACT font name. That includes spelling, spaces, upper / lower case. (E.g. “Source Sans Pro” NOT “Source Sans”; “FontAwesome” not “Font awesome”)
- You must enter the proper CSS Webfont location. Enter the exact location of the CSS file, NOT the website it comes from. There’s usually someplace in the web font repository that tells you how to use it in your website. You just need the URL, no other tags.
In Google Fonts, you want the information under the “Standard” tab. Copy just the URL, highlighted above — the rest of the tag is unnecessary.
Step 5: Save, Check in, and Publish!
Note: If this is an existing project, you and the people viewing it may need to clear their cache.
To check to see if your web fonts are in your project, open the published wireframe on Axshare and view source. Typically, any mapped web fonts are somewhere between lines 14 – 20.
Success! My fonts are all there!