Font not displaying correct in Axure 8


#1

Hi,
I have tried mapping, adding one font at the time, but for some reason, my fonts are not being picked up as they should.
Here is my file: https://8ns04b.axshare.com/home.html

When I look at the source, the fonts I am adding are not appearing there. Here is my RP file:
GlobalNavigation-6.rp (2.2 MB)
GlobalNavigation-7.rp (2.2 MB)

I would love for someone to shine some light on this.
Thanks,

Gabi


#2

Hi Gabi,

I took a look at your file and it looks like there were quite a few different web font and font mapping entries. When you define a font as a web font, you can define all of the font weights within the same web font entry in the URL; for example instead of having an entry with “https://fonts.googleapis.com/css?family=Encode+Sans” and another for “https://fonts.googleapis.com/css?family=Encode+Sans:100” you can include them all together. In Google Fonts, you can grab that full URL in the “Customize” tab for the font to select all of the weights you need, and then copy that full URL and paste it into a single web font entry:

You would do that for Open Sans, Encode Sans, and Encode Sans Condensed to total 3 entries in the web fonts tab.

Generally if you include all needed font weights in the web fonts tab then it is not necessary to include font mappings. For a few of the fonts though, it looks like how they get named and rendered when installed locally doesn’t quite match the info in the browser, such as Encode Sans Semibold. To help with that, you can create font mapping entries that take the specific font that isn’t rendering and maps it to the correct font-family and weight as specified by Google. For example, to fix Encode Sans Semibold the following seemed to work:

Likewise for Encode Sans Condensed Medium:

If you cross-check your local file with the output in the browser and select the widgets that don’t render correctly in the file, then you can check what font-family name and style they’re using locally and map that to the correct font family and font weight. I’ve attached the edited file with the above two fonts fixed, though there may be others missing. Hopefully that helps!GlobalNavigation-7 Edit.rp (2.2 MB)


Font not showing up on other devices when shared with Axure cloud
#3

Hi Alyssa,

Oh my goodness, you saved me!
I tried all kind of combinations, from adding each Google font and mapping them to reading all posts on the forum. All I was getting was half fonts working and half not working. This totally makes sense, I did not think about adding the weight of them all together and just mapping the ones that was not working. I can’t thank you enough.

Have a great day!
Gabi

Thank you so much


closed #4