Being the awesome prototyping software it is, Axure lets us incorporate Web fonts, allowing demonstration even from devices where all your fonts are not installed locally. This is particularly useful to display font icons from Font Awesome or similar libraries, and it renders a lot greater than images icons. The basic concept is to refer to a Web-based font. This works 90% of the time. Sometimes though the prototype has to be demonstrated to users or stakeholders from an offline device. In other cases, the device network forbids Web fonts. But luckily for us, there is an alternative, allowing to embed fonts directly in the demo itself, to that extent converting it to Base64. Here is a tutorial explaining how to embed Font Awesome in Axure directly in the prototype, for the cases when reference to an URL is not possible.

1. Convert your font to Base64

The first step is to convert your local font in Base64. I use this tool to convert my font file from a *.ttf to a Base64 string (*see footnote for more detail). The result is a huge string of character which starts with « @font-face {font-family… »

Go to: https://www.giftofspeed.com/base64-encoder/

2. Add Web font as @font-face in Axure

In your Axure prototype, create a new HTML Generator configuration, named « Including font », for example. You can also use your HTML1 default configuration, but this allows more font-mapping alternatives later. In the configuration panel, go to the Web fonts tab. Create a new Web font, and name it, say, « mywebfont. » Select the @font-face radio button.

In the text field below, paste the following code:
font-family:’mywebfont’; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(‘truetype’);

You can probably guess the next step is to replace « YOUR BASE64 STRING HERE » with the complete string generated previously during step 1. Be patient, there is a lot of characters so this could take a little time.

3. Create a font mapping

Now go to the Font Mappings tab, still in the configuration panel. Add a new one, then select the local font which causes problems when viewed from other devices (Font Awesome in our example.) In the font-family field on the right, enter the name of the Web font you created during step 2 (in our example, that would be « mywebfont ».) And that’s it folks: next time you generate or export an HTML from this configuration, your local font (Font Awesome) will be replaced with its Base64 version (mywebfont.) So no more reference to a Web URL.