AXURE PROTOTYPE does not render fonts for viewing to stakeholders

AXURE PROTOTYPE does not render fonts for viewing to stakeholders…the fonts look all weird and spacing out of wack…what can do for it to see correctly? Sans Serf fonts become Serf etc…Help!
thanks Daryl

The font you used in your rp file needs to be available on your viewers local machine too for it to be rendered correctly. Unfortunately there is no workaround at this point.

Hi @daryl_lee
It sounds like you’re using a custom font in your prototype and they are appearing as serif fonts when your stakeholders are viewing the prototype. Is that right? Custom fonts will appear when viewing a prototype on a computer that has the fonts installed locally but those fonts won’t be uploaded when the prototype is published.

To make a font accessible in your prototype through other devices, you’ll want to use Axure RP’s “web fonts” feature. Web fonts link your prototype to font files that are hosted on the web, allowing the prototype to access and display those fonts at any time.

You can create a new web font entry by going to “Publish > Generate HTML Files” in Axure RP’s menu, switching to the “Web Fonts” section of the “Generate HTML” dialog that appears, and then clicking the green “+” icon there:

Note: The font files you’re linking to will need to be hosted in a publicly accessible location on the web (Google Fonts, file-hosting services, or your own servers). To get started with web fonts, please check out these resources:

https://www.axure.com/blog/implementing-web-fonts-with-google-fonts-in-axure-rp/

2 Likes

Thank you so much for reply - am giving a screen grab. and Am trying to put in 2 google fonts MERRIWETHER + SOURCE SANS PRO…but still generates fonts incorrectly. Any advice from what you see? Do make t a share file or publlsh to share? Just can’t see t read well on other users screens…Thanks Daryl

Hi daryl_lee,
Thanks for sending over that screenshot!

Here is an .rp file with the Google fonts “Merriweather” and “Source Sans Pro” added as web fonts.
GoogleFonts.rp (51.8 KB)

Also, I’ve hosted the file on Axure Share here:
https://jr4hub.axshare.com

Can you check to see if there are any differences between our files and the HTML generator settings? Also, I recommend checking the “Font Mappings” section. If your file has “Merriweather” or “Source Sans Pro” mapped to an empty font-family, it will map to the browser’s default font. Check out the screenshot below for clarification:

Justin - so appreciate your help with this - it is hard for my designers brain! Now have this mage with the 2 fonts. is this correct? But do I Generate at this point in the lower button? As all I want IS to publish / share the file for viewing on other screens?
Hope you may advise again and thanks! Daryl

…also those fonts read well on screen of another user. So what you have works - just need to see if have done to right from what sent you…Daryl

Hi daryl_lee,

In the screenshot you posted, you’ll want to remove the font mappings you have in place by clicking the red “x” near the top of the dialog for both of the fonts. (You’ll only need to work within the “Web Fonts” section). Once you’ve set your web fonts and removed any blank Font Mappings, you can click “Close” and Axure RP will save your web fonts settings when publishing to Axure Share.

If you’re still running into issues, feel free to post your file here and I can take a look!

LV-1131 Subs Page Justin.rp (511.9 KB)

Hi Justin…here is my file. I did the Web Fonts, deleted Font Mappings…just not sure if I click GENERATE at base of screen (or) does this setting stay for every Axure RP file now that I make? Here is file and screen shot (again appreciate this so very much!)…Daryl

Hi daryl_lee,

Thanks for posting that! The .rp file you’ve created is successfully showing the Merriweather and Source Sans Pro fonts in my web browser when publishing to Axure Share.

Now that you’ve successfully set up your web fonts in your HTML generator, you can click “Close” from that dialog. Clicking “Generate” will create a local version of your RP file in the destination you specify under the “General” tab of that dialog.

HTML generators are sets of options for controlling HTML outputs. A generator is used any time you publish —when previewing, when publishing to HTML, and when publishing to Axure Share.

However, these HTML Generator settings are only set in your current working .rp file, which means you will have to set these settings again if you create a new .rp file. If you’d like, you can save a “blank” version of this file that contains these options and any time you need to create a new project, create a copy of your “blank” .rp file before getting started.

Alternatively, you can also import any of the generators from an existing .rp file into another. You can find the option to import by going to “File > Import from RP file”.

I hope this helps!

Hi Justin - we hit the weekend and not sure if you looked at my file. If you can see where am going and does changing one document setting make it set-up for Axure in future? Sent my screen grab of fonts in box and my file to inspect.
best wishes: Daryl

Hi daryl_lee,

Setting these settings for .rp file will not set it for all files. In case you missed it, in my previous reply I offered some suggestions to allow you to reuse your font settings across projects. Please check that out and let me know if you have any other questions!

Thanks Justin…didn’t receive an email to your last message and never saw it. Did what you said to my master Template and all should be good now! I appreciate your help and getting to understand this area that I have been in! Best wishes: Daryl

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.