Photoshop Question posted in
The official user guide can be found here.

Automated web-/iconfont generation – Photoshop

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.
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search