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

advanced-prototyping

#4

You are a LEGEND. Thank you!


#5

I cannot agree more!! Thank you @a.emond


#6

Seriously, thank you @a.emond, this is ridiculously awesome. Thank you for sharing!


#7

Is this tool still hosted anywhere? Looks like the link here is down!


#8

It`s still down - or removed.


#9

Can we just embed this functionality into Axure so fonts aren’t such a shitshow?


#10

Best feature request line ever.

In general, the overall usability of Axure is something that constantly boggles my mind. Quite ironic that a tool for user experience design doesn’t seem to eat its own dog food.

I would love to write a detailed audit of all the various quirks and think of different ways to interface it all. I can’t remember the threads in the forum that point them all out now, but just the endless drop downs, lists, and UI oddities. Somebody else listed the steps to edit webfonts too: Publish :thinking: > “Generate HTML” :thinking: “Web Fonts” :slight_smile: > all the options :tired_face: > “Close” :thinking:

Let’s see what RP 9 brings…


#11

Since that tool was taken down, the guys developed a replacement.
https://thinking.studio/axure-font-embedding-tool/


#12

:tada: :tada: :tada:

Brilliant news - great find!


#13

Does anyone know what this does? Does it serve the font from the thinking.studio domain?


#14

No. It just encodes the font file you supply and gives you the appropriate CSS to input into Axure. The font itself is encoded in the CSS.


#15

Has anyone had any luck with this for Axure 9? It crashes on me and even closes the program so I can’t even submit a bug report for the crash.


#16

Same issue here. It crashes all the time


#17

It’s an Axure 9 bug that is already known. The only work around Axure Support could give me for now is to do ALL the font definitions in Axure 8 then open that file in Axure 9 and save it as Axure 9. Close that file, go to your working file, and import the HTML definitions to your project. Note that you have to change the imported HTML definition as the default; it doesn’t directly import; it just adds another HTML definition.


#18

I have had no luck w/ this in RP9.
The program crashes every time I paste the text. Same as @dacoyle


#19

@axure Can somebody please look into this to get the tool working for Axure 9?

Or look into an update where we can upload our font directly in the publish settings.

Either option would be great. Cheers.


#20

Hi all!

As dacoyle mentioned, we do have a bug report on file about this issue, and I’ve gone ahead and added a note to the report regarding your experiences.

The issue is still being investigated, but I’ll see about updating this topic when there’s news.

Thank you!


#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)


Is there an ideal block font (or font with background) for design dynamic repeater badge style content?
#24

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