WebFont Shows Different after publishing!

bug-report
#1

FontProblem_File.rp (678.8 KB)
Hi Friends,

I am using Archivo Narrow Google font for a mobile application mockup. I have the fonts installed in my system as well. I used a Win7 OS and in the fonts drop down it shows “Archivo”. While publishing this, it works fine. But when i open the same file in Win10 OS and do any changes, the font drop down doesn’t show “Archivo” it shows “Archivo Narrow Regular” and it doesn’t allow me to change its font family like bold or normal. Now if i publish and see, the fonts are broken to something else. I have attached the source file and the screenshot of how it is displayed. Please help me out from this issue. Thanks

FontProblem
FontProblem.png433×774 67 KB
Windows7FontDisplay
Windows7FontDisplay.jpg1682×1051 221 KB
Windows10FontDisplay
Windows10FontDisplay.jpg1594×968 181 KB

#2

Hmm, interesting! When testing your file in Windows 7 and Windows 10 on our end it’s rendering the same way on both; the widgets that are “Archivo” set to “Regular” are consistent on both machines, as are the widgets set to “Archivo Narrow Regular – Regular”. When testing new widgets in Windows 7 and setting them to “Archivo Regular” and “Archivo Bold”, these widgets retain their assigned properties when the file is saved and opened in Windows 10. We haven’t yet been able to reproduce the issue where the font changes, as you’re seeing on Windows 10.

To confirm, do you have the font installed locally on both machines, and is it installed from the same source (Google fonts)? Additionally, what sorts of changes are you making to the widgets in Windows 10 that seems to be triggering the font name change?

#3

Hi, Thanks for your response… Actually, if you have the fonts installed in your system, it works fine. But If you see the same output link from axshare in different machine which doesn’t have the Archivo font, it is getting broken while publishing from my Win 10. In my machine, it works fine as i have the font.

Problem is when i publish the file with fonts changing from “Archivo” to “Archivo Narrow Regular”. Because this file is created in Win 7 and now my machine is upgraded to Win 10. When i open this file in Win 10, the font from the font selection drop down appears as “Archivo Narrow Regular” If i type something with this font selected, the published link shows broken font.

#4

Hi Alyssa,

I will start from the beginning on how i got this issue. I had a Win 7 OS when i started this project. Everything went smooth after installing the Archivo Narrow Font. I have added this font in the Web fonts for publishing. After publishing it looks great in other machines i checked. Whenever i select any text, it shows “Archivo” in the font drop down. And in the drop down besides, it shows “Narrow Regular”. All this went well.

I changed my laptop to Win 10 OS 2 days back. I opened the file in this and it works perfect. Here also if i select any existing text, it shows “Archivo” in the fonts drop down. But when i try to type a new text, the font drop down doesn’t show “Archivo”, instead it shows “Archivo Narrow Regular” directly. I couldn’t see “Archivo” in that.

When i tried changing any existing text from “Archivo” to “Archivo Narrow Regular” then it looks as broken font in the browser. Any new text creation can be done with “Archivo Narrow Regular” font type as that is the only option i could see in the font drop down. And this is broken in the browser. THat’s where the headache starts. Sorry for this big email. But i tried as much as i can to explain the exact scenario. Thanks!

#5

Hi ensiva2012,

Thanks for following up to clarify! From taking a second look I believe I see the issue; when the Archivo Narrow font is installed from Google Fonts on Windows 7, the font family in the dropdown is “Archivo” and the variations can be selected in the next dropdown; however, when the same font is installed on Windows 10, it seems to break up into “Archivo Narrow Bold”, “Archivo Narrow Bold Italic”, etc… rather than just “Archivo”, and this is causing the font to not render correctly with your existing web fonts. This also seems to be causing issues even when using the CSS link that Google Fonts provides, despite font mapping.

This seems like a bug to me that the font changes between Windows 7 and Windows 10 and won’t render correctly, so I’ll go ahead and file it on our end for further investigation. We’ll follow up here with any updates, but in the meantime we’d recommend keeping an eye on the Axure RP 8 bug fix thread for updates.

For now as a workaround, there are a couple of options that appear to work. For one, setting the font to something you’re not using (such as Arial) and mapping different weights of that font (Bold, Regular, etc…) to your web font seems to work.

00003229
00003229.png1846×1406 240 KB

Of course, the caveat is that the font doesn’t look correct on the canvas while editing. Another possibility is to convert the fonts to images by right-clicking them and choosing “Convert to Image”, which will prevent them from changing in the browser but will also prevent them from being edited.

Hopefully one of those helps a bit while the investigation is underway!

closed #6

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