How can I convert .svg files to a font? [closed]

Question

How can I convert .svg files into a font? Is there any API or programmable method?

Answer 1

I found two relevant answers here on Stack Overflow:

1. Creating icon fonts with vector software (i.e. inkscape) and fontforge?
2. Tools to convert svg to ttf [closed] (archived from this deleted SO question)

Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).

Still, I got what I was looking for by combining those two answers.

Clean up SVG

_{^{(This step might be optional.)}} Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ("glyph").

Convert SVG to font

Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.

Using IcoMoon

IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click "Get Info" on the set's preferences so you can name the set and give it some metadata. Use the "Edit" tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.

When you're done, select all of the glyphs you want in the font and then press the "Generate Font" button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.

Now press the "Preferences" button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the "Download" at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.

Iterate

I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cache from Fontconfig)

Validate the font

You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.

Answer 2

There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.

The Icomoon App allows you to do each of the following :

• Get one or more icons from several popular icon fonts
• Upload other fonts, which may be icon fonts but also regular fonts
• Upload SVG files to use as icons
• Combine any number of icons from any number of available fonts
• Set the UNICODE hex value for whichever characters you need
• Export and/or save the font set you create