Montserrat WEB SAFE Google Font not rendering proplerly in Axure Cloud

website-publishing
rp-9
#1

Hi everyone, I’ve just found something really strange that never happend to me before. I was working with the Google Font Montserrat which is also WEB SAFE and noticed that this font when published to AxureCloud was not respecting the paddings and it didn’t want to adapt itself to the “container”, so I’ve started with a new file just to try it out and I found that this can be replicated in every file that was using Montserrat.

You can look at this example file here: https://cf39d0.axshare.com

Also the preview behaves as intended, so you won’t notice this until you publish the file to the Cloud. Locally the generated HTML files are working “fine”, but PT Sans is having the same issue, but not Montserrat.

Here’s the CSS that it was generated locally: styles.txt (1.5 KB)

And also here’s the RP file: FontTest.rp (53.6 KB)

I don’t know what’s wrong here, I’ve tried everything, even embeding the font didn’t help, probably it’s something really silly and I am not seeing it, so if someone can help out would be much appreciated.

Thanks.

#2

I have the same problem with Academy Sans, and it is the brand font, so I can’t just change it

#3

I’m having this issue as well, in trying to use Montseratt. Was anyone else able to resolve this issue?

It looks different when rendered from what it does in the Axure file - it appears as a heavier looking weight when rendered in browser.

Since it’s a Google Font and web safe, I did not map it. I did try to at one point, which created stranger issues like your issue with widget container showing less wide in rendered version than it does in your file. I removed the mapping, which resolved the additional issue the mapping created, but original issue - with it appearing as a heavier weight - remains.

Below is a screenshot that shows the side by side of how the font appears in axure file (RP 10) vs how it appears rendered in the browser. Render issue is same when saved locally or published to Axure Share URL.

Here is RP 10 test file. Montseratt Google Font Render Test File.rp (179.7 KB)

Here is the axshare file URL for render preview: https://4ztwv3.axshare.com/#id=dbkya7&p=montserrat_test_file

Below is screenshot of side by side (Axure file on left, rendered in browser on right).

43%20PM
Screen Shot 2023-02-06 at 8.25.43 PM.png2288×1724 568 KB

#4

So, I was able to resolve my issue:

I had reached out to Axure support. While they hadn’t been able to replicate the issue, they came back with a list of things to check and in doing so it occurred to me that perhaps my Montseratt font installs, which I installed years ago, were dated and something had changed causing this issue. I deleted all Montseratt fonts from my Mac, and then downloaded the most current Montserrat version from Google https://fonts.google.com/specimen/Montserrat and installed that.

It resolved the issue for me. It now renders in browser and looks same as in Axure file. :slight_smile:

Hope that helps anyone else having similar issues.