Distorted Icon Rendering from generated Webfont

[oller]

Hi there,

Bumping to v1.1.1 for the improved templating options, my font is now coming out rather distorted.

Some examples:

The relevant grunt options:

engine: "node",
hashes: false,
relativeFontPath: "../fonts/icons",
types: "eot,woff2,woff,ttf,svg",
order: "eot,woff2,woff,ttf,svg",
normalize: true,
htmlDemo: true,
htmlDemoTemplate: "<%= config.app %>/icons/template/template.html",
htmlDemoFilename: "icons",
fontHeight: 31,
descent: 0,
destHtml: "<%= config.app %>/src/components",

All the source SVG's are 31px width and height and viewport. I've tried buming these all to 512px and updating the fontHeight option, didn't fix the issue.

I have also brew installed ttfautohint, but this doesn't seem to change the output.

node v5.6.0

Anyone else encountering this problem?

[hacker112]

I tried tried to upgrade from 0.4.8 and it seems like the icons are rendered worse for each version. See icon_account(1.1.1), icon_order(0.5.4),icon_response(0.5.4) and icon_zoom-track(1.1.1) below. (Open up the images in a new browser tab to be able to see them in good quality)

In version 1.2.0 my icons don't render at all.

[stevejwikeley]

@oller did you try using the fontforge engine, it seems that node is no longer supported? I switched it over and it solved a lot of rendering issues.

I also found that flattening the transparencies and expanding paths in illustrator also ironed out a few issues.

[oller]

With further investigation, this breaking change came in between 0.4.2 and 0.4.3

I assume it's one of the changes in dependencies in during this bump: https://github.com/sapegin/grunt-webfont/compare/v0.4.2...v0.4.3

In the meantime, I've rolled back to 0.4.2 and found some workarounds for the more limited templating options.

[ArmorDarks]

We seems to have same regression.

Here are icons from older grunt-webfont:

And now part of them started to appear totally broken:

Here are inlined svgs for comparison:

[ArmorDarks]

Any updates? Still have those terrible icons with node engine.

[motet-a]

I faced a similar problem (distorted icons with the node renderer) and fixed it by disabling the SVGO optimization (optimize option set to false).

With SVG optimization:

Without:

[ArmorDarks]

Well, maybe issues in SVGO indeed... So, you example doesn't seems as broken, as ones I've encountered.

Anyway, I don't have where to test it out anymore anyway. We've just switched to inlined SVG, and that fixed our issue :)

[me1k]

Hi.. i have the same issue with both, node and fontforge rendering. Is there any solution to fix the problem ?

These are my relevant grunt options:

                    types: 'eot, svg, ttf, woff, woff2',
                    fontHeight: 32,
                    descent: 0,
                    stylesheet: 'less',
                    template: 'source/_templates/iconfont/style-template.ejs',
                    relativeFontPath: '../../../fonts/icon-font/',
                    htmlDemo: false,
                    autoHint:false,
                    optimize: false

And i am working on a windows 10 desktop

[oller]

I only this week revisited this and resolved my issue @me1k . For me, the crux of the problem was that fontHeight and the corresponding dimensions of the SVGs. This lib now wants the SVGs to be 512 or bigger. I think at that scale it's kinder if you imagine the decimal points of the coords in the SVG.

Short of it, I used https://github.com/vieron/svg-resizer as a quick CLI tool to batch proportionally enlarge all my svg's to 512px. (this script updated the width, height and viewBox properties correctly). I then lost the fontHeight property from grunt as it defaults to 512px and all was good once again.

Hope this helps

[alampros]

As @motet-a noted earlier, I think this happens when smaller SVGs are run through the SVGO optimization and all your long decimal coordinates get rounded off. This is why the tool works best with larger viewboxes.

[TheEssem]

I am having the same problem; however, none of the solutions presented here are helping. Here's a snippet of the Gruntfile:

font: 'Twemoji Mozilla',
types: 'ttf',
autoHint: false,
descent: 0,
optimize: false,
execMaxBuffer: 1024 * 1000,
version: packageJSON.version,
codepointsFile: 'build/codepoints.js'

[ArmorDarks]

In 2018 I would recommend to drop iconic webfonts and use SVG instead

[TheEssem]

@ArmorDarks I would, but I'm using this for generating a color emoji font, not an icon font.

[topolanekmartin]

Hello, are there any updates?