Problem with fonts loading correctly between Axure, web, Mac and PC

Essentially, my problem arises from the font (Avenir LT Std) not loading or loading inconsistently in Axure for my Mac, PC Laptop, and then also differs in Chrome on my Mac and PC Laptop as well as Firefox on my PC Laptop – all instances the prototype site I created appears differently in each case. Additionally, not as much of an issue, but a few objects or widgets also move around and ‘float’ in slightly different positions between Mac and PC (off by half-dozen pixels or so).

I create my designs in Axure on my Mac desktop but need to use my Laptop to take to meetings to present my designs. However, as I mentioned, the Avenir LT Std font-family does not consistently load the uniformly, and differs depending on the OS and browser sometimes even loads the correct font-family but not the right font (Suppose to be Avenir LT Std Black for header but loaded Medium instead).
*
Avenir LT Std font-family is installed on both my Mac and PC. Generating/Publishing HTML files (packaging HTML/CSS and image files of prototype) also has inconsistent/similar results as above.


I have checked the forums here. However, there seemed to be very little to almost no explanation for the following and none of which I could get to work for me in Axure. I know how the following is typically used when coding a site just not understanding how Axure automatically generates and matches up the naming conventions between the graphics/fonts in the design to the HTML and then to the CSS.

Font-Mapping: Tried with Avenir LT Std with no noticeable changes
*
@font-face: Tried this with no luck. As stated above, not understanding how everything connects. I know how this works when normally coding a site though, but not through Axure.
*
URL: Load whatever font from an external server (e.g. Google Fonts - which Avenir LT Std is not included in but we have a license for).

Additionally have shown this to both IT and another Designer in the company who have used Axure, but have not encountered my issue and also could not offer any explanation or solutions other than turn all the type into graphics (not very practical at all in my case).

Any suggestions are greatly appreciated.

I’ve never encountered this issue so I can only guess or offer troubleshooting questions:

  1. Are these problems present in only one file or do they manifest in any new files you try to use this font in?

  2. Do other fonts work fine?

  3. Can you share the specifics of your font setup in Axure?

  4. Can you share the specifics of what isn’t working correctly with regards to the font?

Lastly, if you’re only concerned about the font working on your two computers (where you’ve installed the font on each) then no set up in Axure should be necessary. You should simply select the font from the font menu and when Axure generates its content (locally or AxShare) it set the font-family CSS property to be whatever font you selected for the text within the program. Now when you open it on your other computer, since you have the font installed, the browser should be able to use that to render it (no webfonts necessary). Now of course with this approach the font will only work on computers that have it installed but that sounds that isn’t your problem here. Is this workflow not working for you?

1 Like

Thanks for the suggestions. I have some screenshots here to help (blocked out company and some details).

1.- 2. I created a new mock up file (5th photo) and Avenir LT Std and other fonts seem fine in the new Axure file and in Chrome (both Mac and PC).

  1. Not sure exactly what you mean, other than I had text boxes and set them to Avenir LT Std font-family. Like I mentioned, installed on both machines and re-installed just to make sure. Is there something else I need to setup in Axure for the fonts?

  2. See the screenshots. Looks pretty much the same in Axure on both Mac (photo 1) and PC (photo 3), however you’ll notice that either the fonts do not load in some cases and/or change the spacing (tracking) when previewing on Chrome (photo 2 and 4). Tried on Firefox, none of the Avenir LT Std fonts load.

Most notably it looks like on the PC Avenir LT Std does not load in some cases and reverts to the default sans-serif browser font, but not sure why it would load some of the font-family and not be an all or nothing kinda thing.

My guess at this point would be since the new test file (photo 5) seems to work fine in all cases it might be with the specific file I am working with. Thinking back now, when I originally started this project I had to start over again at the beginning with a new Axure file due to some of the fonts being wonky when creating a ‘master’ menu. I have a lot of text in nested flyout menus and navigation here. Does Axure tend to not be effective in these type of instances?

Appreciate the help, but if anything else comes to mind, let me know.






Does look strange but hard to tell what the problem might be. Sounds like what you’re doing should work in your scenario. Are there any errors in the browser console when the font fails to load?

Lastly, I might email Axure support directly as if it’s a file problem they’re best equipped to handle it, and can do so without having to post your file publicly.

@GreenHills I have the same problem and it appeared when I updated Axure on my PC :-/

Have you solved the problem yet?

Sorry Kristina, but I did not. I just dealt with it temporarily, but then moved to a different position, so I have not really used Axure much since. I contacted Axure I believe, but did not receive a solution. Also discussed internally with other developers and designers who’ve used Axure and they were not sure why this was happening either (they never experienced this).

Shame, 'cause up until this point Axure was exactly what I needed and was pretty effective and very easy to use.

Hi Kristina,

If you’re able to send us a copy of your RP file with the web fonts set up to support@axure.com, we’ll be able to take a closer look and assist you further there. Let me know if you have any questions in the meantime!