Embedding Fonts in Axure Prototypes
You can embed any font you have in an Axure prototype. Here are the steps involved:
Step 1: Readying the font
Base 64 encode (Mac OS) the font file. Make sure to use a command that doesn’t add newline characters or remove them after the fact. I used openssl base64 -in <infile> -out <outfile>
. I then removed the newline characters in Sublime Text using find and replace to replace \n
with nothing.
If you’re using Windows, see the accepted answer here.
Don’t worry, this is the hardest part.
Step 2: Embed the font in Axure
In Axure, go to Publish > Generate HTML Files… > Web Fonts. Click the green plus sign to add a new web font. Choose the @font-face radio button.
At this point we’re going to use Axure’s web font feature a little differently than it was intended. Normally you would add a link to a font file hosted on the web somewhere. Instead of giving a URL, we’re telling the browser (via the CSS @font-face
property) that the included string of text is actually a font file, encoded in base 64, and to interpret it as such. The exact details of this will depend on the filetype of the font file you encoded. For this example I’ve used a .woff
file:
Source.
Note, you don’t dont to include the usual @font-face {}
block as Axure will do that for you.
Step 3: Using the font
If you have the font installed locally, just choose it within Axure as you would any font and use it. This will set the appropriate font-family
property in the generated HTML and the embedded font will be used. If for whatever reason you don’t have it installed locally (but are embedding it anyway), set up a font mapping for it. If you need help setting up a font mapping, take a look here on the offical Axure forums.
I hope this helps you create higher fidelity prototypes.