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

advanced-prototyping
#1

I am attempting to use a non web font in my Axure prototype by following this link about embedding fonts in Axure prototypes but can’t seem to get it to work.

I have managed to successfully ready the font and have it encoded in a .b64.ttf.txt file. I can’t get it to appear in my Axshare link, using the following in the @font-face option of Axure:

    font-family: 'fontname';
    src: url(data:application/x-font-woff;charset=utf-8;base64,ADDHJSJGAHSJSJS...carries on) format('woff'),
     url('fontname.ttf') format('truetype');
    font-weight: normal;
    font-style: light;

My instinct is telling me that my first url in src is pointing to the wrong place and/or that the ‘woff’ format is wrong as my file is ‘truetype’.

Does anyone have any knowledge/thoughts on this or have you managed to do it another way before?

Embedding an owned font – not part of GoogleFonts, et al
#2

Yes, if your base64 encoded file is ttf instead of woff you’ll need to make some changes. Try this:


font-family: 'fontname';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,ADDHJSJGAHSJSJS...carries on) format('truetype')
    font-weight: normal;
    font-style: light;
#3

You might want to try using this tool that I created for embedding fonts. You can upload a font and it will output the appropriate text to paste into Axure’s settings. Click “using this tool” for more help.

Axure Font Generator

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