Hi all,
I put together a prototype today, using a non-standard font.
All works fine on the desktop and looks good.
So then I go to use a web font, which in itself works fine as it shows up — however I have an issue that all my line heights are screwed up. Text that fitted easily inside of a box now takes up a huge amount of space.
Anyone had this issue (and hopefully a solution!)
James
Got an example file to troubleshoot? Could this be a font size problem or an issue with your viewport?
light_forger
[QUOTE=light_forger;34204]Got an example file to troubleshoot? Could this be a font size problem or an issue with your viewport?
light_forger[/QUOTE]
Hi I got the same problem when using web fonts. If I select “Include Web fonts” the web fonts line height changes. I have tried with many fonts.
The line heigh problem with webfonts seems to be apparent when there is soft or hard return.
Please take a look at the attached file.
icons fonts bug test.rp (67.7 KB)
Hey Fernando,
I am seeing the same for FontAwesome paired with any other font. The size of the FA glyphs increases the line height of the entire line.
I have not come across any solution out of the box. One method I have used is to split the content in different label widgets and reposition them manually. It is not perfect, but it seems to do the trick. Hope this answers your question.
light_forger
This still seems to be a problem. Is there any workaround yet? I was trying to replace my local Roboto Light desktop font with the Roboto font-weight:300 from googleapis, but replacing with the Webfont (so I can view my prototype on computers without the font installed) causes extra line height.
Hi xenocryst!
Could you post your RP file here so that I could take a closer look? With your RP file, I may be able to find you a workaround so that what you see in RP matches what you see in the browser. Thanks!
The test requires you have Roboto Light, Regular, and Medium desktop fonts installed. The pink lines mark the cap height and position that I expect (and that works properly). Checking Include Web Fonts on the Web Fonts page of the generator configuration for the default HTML generator will break things, pushing some fonts (Light and Medium) up.
test.rp (59.5 KB)
Hi xenocryst,
Thanks for posting the RP file! I tested viewing the prototype with the “Include Web Fonts” checkbox selected on a machine with and without the Roboto font installed, and I’m seeing the same thing in Axure RP as well as the browser. For example, this is what I see in Axure RP:
And this is what I see in the browser:
Is that different from what you’re seeing? If so, could you post a screenshot of what you’re seeing in Axure RP as well as the browser? And what browser/version are you using?
It also looks like you’re on a previous build of Axure RP 8 (3366). The most recent build is 3377, and so I’d encourage you to update from Update Axure RP - Axure to see if that helps with the issue at all. Ty!
I’m using desktop font Roboto 2.138 for design time in Axure and Google’s Web font version (found in the test.rp).
Here’s what I see at design time:
Chrome 68.0.3440.106 shows this:
IE 11.551.16299.0 shows this:
Hi xenocryst,
Hmm, it looks like what you’re seeing in Axure RP is different from what I’m seeing when opening your file. Could you let me know where you downloaded the Roboto 2.138 font from? And would it be possible if you could download and install the Roboto font from Google Fonts instead to see if that changes anything? I’m not yet sure why you’re seeing something different in Axure RP vs mine, but I’m hoping having the same font files installed may remove this discrepancy. Please also let me know whether you have any altered display settings in Axure RP or your computer. Thanks v much!
I don’t remember, but I think I got 2.138 from here. It’s weird because the Github history looks like 2.137 is skipped… yet that’s what’s hosted on fonts.google.com.
Hi xenocryst,
Thanks for sharing the GitHub link! By any chance, would you be using the glyphs to type out text with the Roboto font, or are you simply selecting the Roboto font from the Font dropdown in Axure RP? I haven’t yet been able to reproduce what you’ve been seeing in Axure RP, so any additional details you’re able to provide about how you’re editing text in Axure RP will be a big help so that I can reproduce this on my end.
In the meantime, could you try downloading the Roboto font directly from Google Fonts? For me, what I see in Axure RP matches what I see in the browser output, after enabling web fonts in your project, so I’m hoping this will resolve the discrepancy for you at least during this troubleshooting process.
The issues arise due to the CSS where the padding does not cause any alignment defect and for proper instructions go to https://errorcode0x.com/resolve-kaspersky-antivirus-error-1922/
