Embedding fonts in Axure made easier

#1

(One last update to change to permanent URL on my site)

Try it out here

I’ve seen the question of how to embed fonts in Axure come up again and again over the years here on these forums. There’s a tried and true method to do so, but it involves a few steps usually some tinkering depending on the instructions you found and if you’re using the same file type as the instructions. I’ve wanted to make the process easier and finally over the past two weeks I sat down and got a working prototype together that makes the whole process easier.

Why is this easier?
It does everything for you. It reads the font file you upload and extracts the font name from it. It checks the type of font file (even if you uploaded it without an extension!) and gives you the appropriate MIME type to use, so you don’t have to even know what that is or look it up. It even detects the font weight from the file, if applicable. In the end it gives you a fully formatted text blob that you only need to copy/paste into Axure. If any of the values it finds are wrong or don’t seem right, you can modify them and the text blob will use your updates.

However…
I’m calling this v0.1 so there’s still a few known issues, but nothing that should prevent it from working entirely.

  • If you’re using a WOFF2 file, it can’t detect the font name or weight. This is because the library I’m currently using for parsing the file doesn’t support WOFF2.
  • If you want to leave off font-weight, you might need to remove some extraneous text at the end. This will be fixed.
  • Only WOFF, OTF, TTF and WOFF2 (partially) are supported at this time. If you have a font type you want to use but can’t, let me know and I’ll add it if I can.

What else?

  • In case you care, the font is never upload to a server. This works 100% client-side. You could even download the page (and the linked JS files) and it should even work offline.
  • I’ll be adding the option to grab a font file from a URL in addition to uploading it from your computer.

Check it out on github

#2

This is fantastic Nathan, thanks!

#3

Hi Nathan
This looks exactly what I need, but I am not sure that I am using it right, because it didn’t work.
I need the fonts to be embedded when the file is shared via axshare with colleagues that do not have my fonts installed on their local machines. Does this tool gives the answer for it?
what should I do with all these fields: Font-Family, Font weight, MIME type, Format?

Thanks,
Ilana

#4

If the fonts are hosted online already, I would user that first and foremost. But if they’re not, this will let you do it without putting them online somewhere.

What type of font file did you use? Unless it’s a WOFF2 you shouldn’t need to change anything, most likely.

Take the output at the bottom and copy paste it into Axure’s web don’t setup. Make sure to select “font-face” and not “link to CSS”

#5

Documentation for setting web fonts is here.

#6

Thank you! I’ve had trouble doing this manually before.

#7

Unfortunately I’ve tried this several times uploading different types of font files .OTF and .WOFF and I cannot get it to work. Attached is the file I am testing out using a remote testing platform called Browser Stack. I know for a fact that these servers that are being used don’t have these fonts, so that is why I am testing using this method. Any help would be appreciated.

font-test.rp (151.7 KB)

Thanks,
Mike

#8

It’s not working for me either. I loaded the font into the little application in the webpage, and copied the part at the bottom into the @font-face{} section in Axure, but it still doesn’t load with the file.

#9

Is this working for anyone else?
I really appreciate the tool, but it doesn’t seem to be working.
I’m using a TTF font and I don’t have font mapping set up. As far as I understand, if I embed the base 64 code, I don’t need to set up font mapping.

#10

You may still need to set up font-mapping if font-family Axure applies to it is different than what the font contains. If this is the case, you can setup font mapping, or change the font family in the font-face settings that accompany the base64 blob.

To check, add some text in Axure with the font you want, then preview it and use the browser to check the applied font-family in the Axure-generated CSS, and see if it matches up with what is in the font-face declaration.

Lastly it is possible there’s a bug with the tool (there are more fonts than I can possibly test), but I couldn’t tell you why it’s not working without the exact font, or verifying the generated font-family matches.

#11

Thanks for your speedy response.

I checked with Axure’s generated HTML (inspected element on the text), and the font-family is the same as what I indicated in the font-face definition.

I don’t think there’s anything wrong with your tool because I also tried it out with other steps outlined by others and it’s been not working. So I’m thinking this may be an Axure 9 thing? Are you working with Axure 9 and is it working for you?

#12

This seems to be the same result that I am having as well (using RP10). Doesn’t matter on the font file type either- they all seem to be within the generated HTML (as expected), but the end result is still the browser default font (in my case Helvetica).

What’s even more odd is that I have older @font-face encodings for different fonts that still work, but even if I update the necessary labels/text with a different font, it all of a sudden doesn’t work. Could there be something wrong with how the font itself is being encoded? I’m at a loss.

#13

I have not tested it with Axure 10 since it released (I created it before it did), I’ve not had the time. But since it seems to not be working at all for Axure 10 I might take some time soon to figure it out if I can.