Creating icon font via command line from vector image sources

Font file has the benefit of containing plenty of vector graphics, thus scalable, if used as a single colour icon. Each character, outside the commonly used space, can represent an icon, which can be used as any text.

The following example commands are all done in a Unix based OS, due to the software dependency requirements. In this case Ubuntu Linux is used.

The following tools need to be available, thus installed in the given operating system.

sudo apt-get install fontforge

After downloading and uncompressing the woff-code-latest.zip from the above Mozilla link, build and install it with the following commands:

cd woff-code-latest
make
sudo cp sfnt2woff /usr/local/bin/
sudo cp woff2sfnt /usr/local/bin/

Finally install fontcustom via Ruby Gems:

sudo gem install fontcustom

Use, where svg-files is the folder that contains all the SVG files:

fontcustom compile svg-files

Generate a default configuration file, called fontcustom.yml, with a command:

fontcustom config

The contents could look something similar to the snippet below:

font_name: fontcustom
css_selector: .icon-{{glyph}}
preprocessor_path: ""
autowidth: false
no_hash: false
force: false
debug: false
quiet: false

Make any changes needed, for example:

font_name: NipponBudoIcons
css_selector: .budo-icon-{{glyph}}
preprocessor_path: ""
autowidth: true
no_hash: true
force: true
debug: true
quiet: false

and then run simply with the following command with the configuration file in the current folder:

fontcustom compile

The different configuration options are explained at fontcustom GitHub page.

In case the source file would an Illustrator graphic, there is a plugin which allows exporting top level layers as individual SVG files, that are named according to the layer name.

The Illustrator extension for exporting SVG files used here is Layer Exporter.

Another thing to look as is the relative size of the given icons, as while they are scaled to fit the same area, there might be differences in the output. This can be handled by creating a transparent bounding box in Illustrator, for each icon separately, which is then used for determine the size of the resulting SVG files. Once the export is done and if the font is now created, all the icons look the same, a solid fill rectangle due to the bounding box. Therefore the bounding box needs to be removed from the SVG files once they have been created.

The given bounding box in SVG might look something like:

<rect id="bounding_box_36874" x="0" y="0" width="20" height="20"/>

A regular expression which can be used for finding all occurrences:

^\s*<rect id="bounding_box_.*/>$

Further cleaning of the resulting SVG could be done with svgo, but it is not demanded as the SVG files are just and intermediate format in this task.

svgo --folder=svg-files --pretty

On the other hand, specially if the resulting SVG seems messy, it might be worthwhile to run the above command before trying to remove the bounding box, but be aware that the type of it might change, from rect to path.