Custom Fonts

#1

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.

#2

Embedding Fonts in Axure Prototypes

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

#3

HI, Going through the link provided. Thanks.

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

#4

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.

#5

Thanks ā€¦ It worked

#6

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?

#7

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

#8

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.

#9

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ā€¦

#10

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.

1.JPG982Ɨ547 69.9 KB

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

Thanks,
Vikram

#11

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

Here is my Axure file

#12

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.

#13

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)

#14

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.

#15

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

#16

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:

2018-02-15_1107.png996Ɨ408 58.8 KB

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!

#17

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

#18

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)

#19

Hi a.emond,

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

Thanks

#20

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.