CODEWITHSUNDEEP
windowssvgfontsgruntjswebfonts
trugh
trugh

Reputation: 21

Generate webfont with Grunt plugin grunt-webfont on Windows

With my team work, we have to generate a webfont of icons from svg files for our backoffice. For doing this with Grunt, we found a plugin named "grunt-webfont".

Here the link : grunt-webfont repository

My problem is that doesn't generate correctly our webfont on Windows. Instead of an icon, i have a little square.

By default, the task starts with the engine params fontforge, but it's doesn't work on Windows. So i try to set this option with node (with ttfautohint dependency). But it doesn't work either.

Here my plugin config : 

dev: {
  src: '<%= project.app %>/images/pictos/*.svg',
  dest: '<%= project.app %>/styles/fonts/',
  options: {
    font: 'my-icons',
    stylesheet: 'scss',
    syntax: 'bem',
    htmlDemo: true,
    relativeFontPath: 'fonts/my/',
    engine: (grunt.option('engine') || 'fontforge'),
    templateOptions: {
      baseClass: 'my-icon',
      classPrefix: 'my-icon-',
      mixinPrefix: 'my-icon-'
    },
  }
}

It seems to be good when i do :

$ grunt serve --engine="node"

The result is :

Running "webfont:dev" (webfont) task Font my-icons-738111b522f08be9663c9b5af0606fd5 with 24 glyphs created.

But still little squares...

I tried to set 'autohint' option to 'false', and same result...

My work team do this with Ubuntu and it's work great ! What kind of solution i have to do this on Windows ??

Thanks.

Upvotes: 1

Views: 3972

Answers (3)

thybzi
thybzi

Reputation: 1283

You mean little squares like [], or a tiny dots representing your icons (and looking similar to them in font-size is increased)?

If tiny dots, that may be a problem of too small source SVG files. Resize them to 512px height (both canvas and inner content), regenerate font, and you'll have you icons.

P.S. I also use grunt-webfont on Windows, both engines (node/fontforge) work somehow for me.

Upvotes: 0

xiaoma
xiaoma

Reputation: 11

I had similar problems using Grunt Webfont in Windows using the Node engine. Most shapes worked, but a large amount containing shapes within shapes just gave a outline of the icon.

During my own search for a solution I found this article describing how to achieve this using a Vagrant to build the fonts from windows: http://mac-blog.org.ua/grunt-webfont-windows/

Fontello (both web site and Grunt plugin) has similar problems. For my svg icons the problem seemed to be related to fill rules, e.g. even-odd. They have good documentation explaining more on this matter: https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images

Regarding my own journey, I ended up using icomoon.io which supported these more advanced svg features.

Upvotes: 0

allcaps
allcaps

Reputation: 11228

It can't be done with some svg on Windows.

The Readme.md of Grunt-webfont says that their product won't work with Fontforge on Windows. So your only option is Node.

Also, in the Readme.md: Node doesn’t work with some SVG files. So check with the Ubuntu team if they can render your svg file with Node and not get squares.

Upvotes: 1

Related Questions