Custom Fonts

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.

Embedding Fonts in Axure Prototypes

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

1 Like

HI, Going through the link provided. Thanks.

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

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.

Thanks … It worked

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?

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

1 Like

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.

1 Like

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…

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

1 Like

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

Here is my Axure file

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.

1 Like

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)

1 Like

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.

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

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!

1 Like

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

1 Like

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

Hi a.emond,

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

Thanks

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.