Tutorial: Including Webfonts in Axure Files

Including Webfonts Axure Files

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.

Versions

This tutorial is intended for Axure RP Pro 7 and Axure RP Pro 8.  Having never used any of the previous versions, I can’t verify whether these instructions apply.

How to Include Webfonts in Axure Files

Step 1: In Axure, Open Axure’s Publish Menu, Select “Generate HTML Files…”

Step 1

 Alternately, you can hit the “Edit” link before you publish…

Click edit on publish screen

Step 2: Next, click on “Web Fonts”

Step 2: Web Fonts Tab

Step 3: Check out the generator if necessary (upper right corner); and hit the green plus sign to add a new Web Font

Step 3: Making your changes to the generator

Step 4: Enter the font information

Some things to know:

  1. 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.
  2. 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”)
  3. 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.
 Step 4: Font Information

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.

"<yoastmark

Success!  My fonts are all there!