Tool for embedding web fonts in your prototypes

#1

I’ve come across a few posts from people having problems with web or custom fonts in their prototypes not rendering properly in a particular browser. It’s happened quite a few times myself where a client ends up seeing Times New Roman in a prototype because something was done incorrectly in Axure’s settings.

Anyway, I developed a tool to help solve this problem. Just upload your font(s) and the tool will output a string that you can copy and paste into Axure’s Web Fonts settings.

Axure Font Generator

Click “using this tool” at the bottom for more details.

Enjoy!

Andrew.

#2

Thanks so much for sharing this awesome tool with the community, Andrew!

A heads-up for anyone using the font generator: In my testing, I’m seeing that the font-family name provided by this tool doesn’t always match the font-family name used in Axure RP’s generated CSS. If you’re seeing any rendering issues with your web fonts, try checking the font-family name first.

A quick way to do this is to inspect a bit of text in your prototype in the browser. In most browsers you can do this by right-clicking the text and selecting “Inspect” or “Inspect Element”. Then, locate the font-family name in the element’s style information in the browser’s developer tools. If the font-family name displayed in the browser doesn’t match the font-family name at the beginning of the @font-face definition provided by the Axure Font Generator tool, change the @font-face’s font-family name to match what you see in the browser.

In Google Chrome:

screenshot
00001141.png748×765 62.7 KB

In the font generator:

screenshot
00001142.png726×671 44 KB

I hope this helps!

#3

Andrew,

Thanks for this tool! I just did a test and was able to convert Comic Sans MS into a long text string!

The tool says it supports .ttf, .eot, .woff. But the font I need to convert is OTF. Should I be bold (no pun intended) and just try dragging my OTF font onto your tool? Or should I try first running my font through an OTF-to-TTF converter tool, and then use your tool?

Thanks again.

AG

#4

Quick reply to my own question:

Dragging an OTF file works – at least with the partcular OTF files that I tried.

Thanks again, to Andrew & Anthony.

#5

I did have some success with this, however I’ve not had any success with more than one font weight. The Bold works fine but the Light just doesn’t seem to work despite trying with different font formats; OTF EOT TTF or WOFF. What am I missing here?

#6

Hi Andrew,

is there any chance you can provide this tool as a local executable? I tried out a few base64 encoders but it never really worked. Unfortunately I cannot upload the font file due to internal IT restrictions…

Thanks!

#7

Hi Andrew, the link on your post do not work anymore, any change you had an updated link where we can access the Axure font generator
Thank you
Miriam

unlisted #8
closed #9