Axure 8: Font Rendering Problem

#1

Axure 8 incorrectly renders an Icon-Font I created. Actually the font bleeds, i.e. an outline is put around the font, see below:

Axure 7 correctly renders the Icons.

Now if I import this Axure7-file into Axure 8, then also Axure 8 renders those icons correctly. The problem is, that if I add a character in Axure 8, then it starts to bleed again. The worst is, if I touch those correctly rendering icons, then they start rendering incorrectly.

You can see this most clearly in test-axure8.rp by comparing the design section with the section displaying the icons as per screenshots above.

#2

For those of you following along at home, gluckstaler wrote in to the help desk, and I assisted them via that channel. The font “bleeding” was being caused by the widget style applied to the icons in the RP 8 file, which had bold font styling selected. The issue seemed to be that RP 8 had applied the bold styling automatically, but I was unfortunately unable to reproduce that behavior on my computer. If anyone else runs into a similar problem, please let us know so we can continue investigating.

#3

Hi,
I have the same or it seems to be the same problem.

  • I used Widget Sytles
  • I defined special fonts per @font-face
  1. If I dont use the wiget style and set the font to the bold font type Axure automaticly also sets the bold fromat
  2. If I configure the widget style it doesn not
  3. But if I Assign the style axure again also selects the bold format
  4. In Chrome & IE it still looks “not to bad” but in Firefox it gets a Font weight of 700 which is the reason for the bleeding

I Sadly can not provide the file, because it is a confidetial customer project.
Best regards Fabian

#4

Hi Fabian,

Welcome to the forums!

I understand the file is confidential, but would it be possible if you could strip out the file of any proprietary information and then share that here so I can try and reproduce the issue on my end? If you’d rather keep the file private, feel free to send that over to <support@axure.com>. We would only need to see the setup of the web fonts, font mappings, and widget styles in the file, rather than any content. If you’re able to reproduce the issue in a new file that you’re able to share, that’d be even more helpful. TY!

#5

I’m having the same issue in with the bold font rendering in chrome. It only started happening about a month ago, it has been working correctly before. I’m using a google font so not sure if its the way I’m implementing that. I’d be happy to provide some files if it will help find a solution.

#6

Hi Jake,

Would you be able to post a copy of the RP file you’re seeing this issue in? As Jane mentioned above, you can remove any content not related to the issue from the file and attach it to an email to support@axure.com if privacy is a concern. Can you let us know which build of Axure RP and operating system version you’re currently running as well? Thank you!

#7

returnCheckout.rp (77.7 KB)

ChromeVsFirefox.jpg814×762 233 KB

I’ve attached my project file along with some screenshots comparing Chrome to Firefox. Thanks

Axure RP 8 Pro
8.1.0.3372

Windows 7 64-bit

#8

Hi Jake,

Thanks for posting your file. Hmm that’s strange, after some testing I’m seeing that the text in your prototype is rendering as bold in both Chrome and Firefox on Windows and MacOS. Could you confirm if you’re seeing this issue in both the preview of your prototype and in the published version, or if it’s only appearing in one? Does the text appear as expected when viewing the prototype on a different device?

Also, would you be able to check what font your browser is indicating the text is? You can check this by right-clicking the text and then selecting “Inspect/Inspect Element” from the context menu:

2018-02-13_1714.png813×353 51.4 KB

Hopefully this will help give us a better idea of what might be going on!

#9

Hi sorry for the delay, Unfortunately it seems to do it in both the preview and the published version.

What i have noticed if i delete the inline style for font-family it’s seems to display correctly. I’ve attached a screenshot and highlighted the problem section in red.

Font-issue.gif1920×933 89.1 KB

#10

Hi Jake,

The fonts in your prototype look correct on my machine as well. I wonder if there’s a problem with your local font installation for Open Sans. Did you download the Open Sans font files directly from the zipped archive at Google Fonts?

And as a test, can you try uninstalling your current installation of Open Sans from your computer and then viewing a fresh instance of the prototype in a new browser session? Also compare the results as you re-install Open Sans from Google Fonts. Afterward, try rebooting your computer to see if that helps with any persistent error.

Last, try Simon’s tip to see whether you can view the prototype and correct fonts on another device, like your mobile phone, while it’s connected to your cell network (or another different connection).

What can also help going forward is to focus on what might’ve changed around a month ago when this issue started. Any new tools or system updates that might affect your font installation or the way it’s rendered in the browser? Did you recently start using any kind of font management tool?

unlisted #11