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

Axure RP 8
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)

3 Likes
24

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

25

Hi Joseph!

Itā€™s typical that there are separate font files that are being provided for each font style (i.e. Regular, Bold, Italic etc.)

  • How can we leverage your solution to make use of those multiple font files?
  • Also, Iā€™m not sure how to map the font when multiple files are involved?

I did try just uploading one font file of style (say Regular) and making it Bold just does not work (because it was nothing but faux Bold) the same as it would when uploading a separately encoded font file for the style Bold.

If you can solve this problem for me, nothing like it. Iā€™m sure the community will benefit too greatly as Iā€™ve never seen a solve for when multiple font files are provided for different styles of the same font.

Thanks!
-Mani B

26

The trick is to load and map each font file individually in your CSS or font manager.

27

I tried doing that but only the last uploaded style persists and overrides everything else!