Incorrect font height output

[makabde]

Hi all, I am currently fighting with grunt-webfont as I am facing an issue with the generated font. It seems that few pixels are added to the font height and I did not manage to find where this is coming from. On the screenshot, you'll notice that the icon is 36px height instead of being 32px. My inputs are all 512*512px svg files. Cheers,

EDIT: I have tried to generate the webfont using the FontCustom gem on a ruby based project and everything was fine. Width and height were 32px as expected.

[DanielHudson]

Hi,

I have a similar issue, I have some 'landscape' icons, where the width is 3 or 4 times the height of the icon. The end result seems to be that I have tiny icons aligned to the top of the font characters bounding box. (The bounding box looks to be almost square)

I can recreate the issue by making any SVG that is not a square shape.

I am going to look at generating the font using FontCustom as well now...

Thanks.

[sapegin]

@ShinobiCorp It’ll be very cool if you could find time for some experiments.

[makabde]

@sapegin @ShinobiCorp if I can ben of any help, please feel free to ping at anytime. Cheers.

[sapegin]

Probably the difference with FontCustom is in this lines: https://github.com/FontCustom/fontcustom/blob/master/lib/fontcustom/scripts/generate.py#L77-L83

[3cc-london]

I had the same issue when generating the icons/fonts with Fontcustom, no matter what values I used for the Glyph width.

Also shrinking down the SVG didn't help either...

[makabde]

After some reading here and around in order to understand how others would create their font icons, I have decided to try to tweak some settings of the generate.py file in order to match the settings of the previous links. I finally found some settings that are close to my expectation.

f = fontforge.font()
f.encoding = 'UnicodeFull'
f.design_size = 16
f.em = 1024
f.ascent = 896
f.descent = 128

[...]

f.autoWidth(0, 0, 1024)

With these values, I've also upscaled my SVGs to 1024px

However I am still wondering why the generator is getting rid of the icon bounding box. For certain reasons, I created a font that must have internal margins; setting the font-size to 32px will result to an icon that is actually 24px height. Using the icomoon generator I had a font that kept the bounding box where as in our case the it does not keep the bounding box–may be this is an other subject matter...

[pensierinmusica]

Yes, it would be cool if it could be fixed :) :+1:

[sapegin]

@pensierinmusica PRs are always welcome.

[pensierinmusica]

@sapegin, sorry about my embarassing ignorance... what are "PRs"? :)

[sapegin]

@pensierinmusica Pull request :shipit:

[pensierinmusica]

@sapegin :) Got it

[jtammen]

:+1 I am experiencing the same issue ... the SVG's bounding box seems to be ignored and the resulting icons don't have necessarily the same size. Using the same SVGs with IcoMoon gives the expected results.

Any ideas on how to fix this?

[pensierinmusica]

@jtammen did you try with FontCustom alone? What is the result in that case?

[mrzmyr]

Having the same experiencing as @jtammen. As @pensierinmusica asked, i tried Fontcustom. Fontcustom comes up with the perfect line heights.

[makabde]

A month ago I've posted some tweaks that I did on the generate.py file. It solved this issue on my side. Should I create a PR? I have to admit I don't think this is the end solution but at least it solves the issue. Any thoughts?

[sapegin]

@makabde I would be great! Thanks!

[jtammen]

@pensierinmusica Can confirm that using FontCustom directly solves the issue in my case. @makabde PR would be great (-:

[lpillonel]

Yeah, grunt-webfont ignoring SVG's bounding box is really a pain in the ass... Hope it will be fixed soon. Otherwise fantastic tool, keep up the good job : )

[max-mykhailenko]

All icons have top padding. I try to change engine, fontHeight, descent, ascent, but icons padding doesn't change. How I can fix this?

[peter-mouland]

I notice this problem too. I solved it with some dirty css specific to the problem icon.

@makabde have you got round to pushing your changes into a pull request?

[luruke]

Same problem for me using fontforge as engine, while with node engine it works great

[rarkins]

Also seeing a similar problem. My icons are often "cropped" even though the SVGs are hand-crafted to be 512x512 px. Until this issue is fixed by grunt-webfont, does anyone have any idea what I can do with the SVGs themselves to prevent it?

[lukeapage]

this issue seems to have confused both the original one and the issue with bounding boxes of the svg.

using fontforge the only issues I had with bounding box were solved by having a very small descent. this page may be of help: http://designwithfontforge.com/en-US/Importing_Glyphs_from_Other_Programs.html