Embedding font into Axure prototype through @font-face and Base 64 encoding

advanced-prototyping

#22

so helpful, thank you!


#23

Hi all -

I found a workaround for embedding base64 fonts in Axure 9.

Convert your font. I used this tool.

Paste the output into a text rectangle in Axure, making sure to name the font family. Hide the rectangle.

Add the following javascript (via the ‘external url’ field of the Open Link command) on page load:

javascript:
document.head.insertAdjacentHTML("beforeend", `<style>[[LVAR1]]</style>` );
void(0);

…assuming LVAR1 is a local variable referring to the text of hidden rectangle. (Note that those are backwards quotes around the style tags.)

Then, just map another font like Arial to this font, or I suppose you can install the font on your local machine and type with that.

Note that if you are on a Mac, make sure it’s not swapping quote characters for ‘smart quotes’ that javascript doesn’t recognize. (It’s a checkbox under Keyboard > Text in the system preferences,

Sample file: embededfont.rp (87.3 KB)


#24

It’ll be great if Axure would ramp up Axure.cloud Project Folders
-> to host Fonts of a dedicated project.