Automated web-/iconfont generation

Question

You see these on every website these days - there are barely any without them now. Icon fonts have pretty much "taken over". But the creation of these tools is a problem - to me, at least.

Due to me being visually impaired, I work with a designer that can craft SVG glyphs for me - each of them is stored individually. For instance:

arrow_left.svg
arrow_right.svg

Now, I don't have any font editor or graphics editor like Photoshop or Adobe Illustrator in order to pick the icons together into a font. And I also am sort of a nerd and do 95% of my development inside the terminal. Like creating a distribution and such.

Now I decided that I wanted to automate the font creation. As we are inching closer to a set of icons that I really like and think fit together, I feel like it is time to start making it into a proper webfont, or iconfont. Both terms seem to be used for the same thing.

My main development environment consists of Github Atom, NodeJS and PHP. I do not use Gulp or Grunt and am using NPM scripts instead.

What methods/ways do I have in order to automatically generate a webfont? What I want to achieve is:

Have SVG, TTF, WOFF, EOT files of my font.
Not need to worry about the charmap, let the tool decide.
Create a CSS file for usage.

score 1 · Answer 1 · answered Jul 28 '15 at 07:27

1

Depending on your workflow, gulp-iconfont can do the job https://github.com/nfroidure/gulp-iconfont

There is also CLI variants, see https://github.com/nfroidure/svgicons2svgfont

The is also gulp-iconfont-css that can help generating your styles.

answered Jul 28 '15 at 07:27

nfroidure

1,531
12
20

score 0 · Answer 2 · answered Dec 28 '20 at 08:24

0

You can use webfont module

npm install --save-dev webfont

and you can use it something like this:

const fnt = require("webfont").default;
const fs = require("fs");

const NAME="MyFont";

fnt({
    files: "*.svg",//Provide path to svg files
    fontName: NAME
}).then(res => {
    fs.writeFileSync(NAME+".ttf", res.ttf);
    fs.writeFileSync(NAME+".eot", res.eot);
});

As far as I remember, in the parameters of this module, you could sort the files according to their names. So you can read the files manually in the same way; Sort by name and create a CSS file for them. It's probably not difficult, but I'm not sure if this module can do it automatically or not.

There is also another tool called FontForge that works great visually. As far as I can remember, you can connect to it using Python without GUI. Of course, if an option other than NodeJS works for you.

answered Dec 28 '20 at 08:24

Shamshirsaz.Navid

2,224
3
22
36

1

I should note that in this case, the icons' character codes should correspond to their Unicode equivalents when they exist, as this will aid users that disable Web fonts or use browsers that do not support Web fonts. For example, left and right arrows have Unicode character codes of U+2190 and U+2192, respectively. – Peter O. Dec 29 '20 at 20:05
@PeterO. It was an interesting and important point. I had not paid attention to it. I'm not sure this module can put any image file inside a unique character. – Shamshirsaz.Navid Dec 29 '20 at 22:09
I thing fontforge may be a better tool for mapping with more control over the characters as suggested in this thread https://stackoverflow.com/questions/53269493/generate-ttf-from-png-svg-files-using-fontforge – Shamshirsaz.Navid Dec 29 '20 at 22:13

Automated web-/iconfont generation

2 Answers2