Custom Fonts

tejatarun · September 25, 2016, 8:03am

Hi ,

I have been known that we can use custom fonts with axure, provided that these custom fonts are hosted online and we have to incorporate the links of hosted CSS in Axure.

However, i was just wondering if there is any other way other than hosted online fonts ?

Like : when i publish/html export could be able to package the fonts along while publishing/html export ?

Thanks
Tarun.

Gregor · September 25, 2016, 11:43am

Embedding Fonts in Axure Prototypes

nathan made an english tutorial how to embedd fonts base64 encoded directly to axure.

tejatarun · September 26, 2016, 11:12am

HI, Going through the link provided. Thanks.

but just wanted to check is it possible with axure to export fonts while publishing/html export ?

nkrisc · September 26, 2016, 1:23pm

Using the method on my post, your font is actually included in the CSS of the prototype and will be included when exporting or publishing to AxShare. The key is the font file is base64 encoded and included in the @font-face declaration.

tejatarun · September 28, 2016, 4:06pm

Thanks … It worked

jadatmag · February 15, 2017, 4:30pm

Having trouble in the first step

My terminal says the following:

ltp-xxx:~ xxx$ openssl base64 -in </Users/xxx/Desktop/thesans.otf> -out </Users/xxx/Desktop/thesans2.otf>
-bash: syntax error near unexpected token `newline’

am I doing something wrong?

Another question, If I do succeed base64ing the file, Do I need to add all the bold/italic/bolditalic files separately if I use them all?

a.emond · February 15, 2017, 4:38pm

I just posted this in another thread, but you can try using this tool that removes the need to use Terminal to do the conversion. You can upload your font and it will output a string that you can copy and paste into your Axure settings.

Axure Font Generator

nkrisc · February 15, 2017, 4:54pm

The link a.emond posted will take care of it for you, give that a shot. But based on the error message I’m guessing you copy/pasted a line break into your input somewhere.

jadatmag · February 21, 2017, 10:34am

Using the Axure font generator and the tutorial included on that page still doesn’t work for me

This is the link of my demo that isn’t using the included fonts:
Untitled Document

The title of the page ‘ANWB Visa Card aanvragen’ shows up in Times New Roman while I am using a custom font for it…

Vikramadhithan · February 21, 2017, 12:38pm

Hi,
I think i am getting your font only.Try to use .ttf format for font generate.

Check in generated code font-family and widget font -family same or not.

Can you post your rp file with font or generated code?

Thanks,
Vikram

jadatmag · February 21, 2017, 2:00pm

bestellen reditcard v5.2 inc webfonts.rp (2.92 MB)

Here is my Axure file

nkrisc · February 21, 2017, 2:25pm

From what I can see, it looks like the font you’re using doesn’t match any of the font-family in your font-face declarations.

Vikramadhithan · February 21, 2017, 2:55pm

Your issues are fixed. Yes(Nathan mentioned above), you need to match font-family in your font-family.

Thanks,
Vikram
bestellen reditcard v5.2 inc webfonts-fixed.rp (2.43 MB)

jadatmag · March 2, 2017, 12:14pm

Hi guys,

Tnx for helping me out!

The fonts that I added in Web fonts were not matching the fonts that I had locally installed. The naming was quite different somehow. Nicely spotted!

Tnx Vikramadhithan for editing my file. The file you edited for me was almost good, but all bold/italic states were not displaying correctly.

I couldn’t find a fix for the different fontnames locally and included in Axure. In the end I fixed it by just using my local fonts locally and using font mappings for external displaying.

Natalika · February 13, 2018, 3:02pm

Hi guys!

I tried to attach Font Awesome as you mentioned in instruction (http://www.nathankrischer.com/axure/2016/04/06/axure-embedded-font.html). But i can’t see it working in Chrome or Mozilla.font1.rp (64.1 KB).

base64 code had no \n inside.
i use Axure 8.

Please, kindly help.

Thanks, Natalia

Simon_Axure · February 15, 2018, 7:55pm

Hi Natalia,

I did some testing with your file and I’m seeing that the “Font Awesome 5 Free” font is correctly rendering in both Chrome and Firefox. Here’s what I’m seeing on my end in Chrome in both the preview and published versions:

Would you happen to be seeing something different on your end? You can check which font being rendered by selecting the text, right-clicking it, and then selecting the “Inspect/Inspect Element” option from the context menu. This will hopefully help get us started with some troubleshooting!

nkrisc · February 15, 2018, 8:14pm

Given that this appears to be an icon font, have you tested it with any of the icon glyphs the font presumably includes?

Natalika · February 16, 2018, 10:50pm

Hi there! Thanks a lot for quick responds! I was confused by different look of font in browser and project file Thanks a lot, happy it works)

ramanajaini · December 12, 2018, 10:06am

Hi a.emond,

Looks like the link for the Axure Font Generator tool is broken.
Could you please post the updated link?

Thanks

carolyn_richard · July 2, 2019, 3:08pm

I would like to add custom fonts to Axure, and I am trying to use the blog post mentioned below to do so, but I can’t get past the first step. I am not comfortable using Terminal (not a developer), so I know I’m doing it wrong, but I’m wondering if there is a video tutorial or a tutorial with screen grabs available somewhere so I can SEE what this step looks like in more detail.