Generating font files from SVG files

Question

I am trying to make an installable font (trueType, openType + web) from different svg files containing the characters. The tricky part is that the letter shapes are actually randomly generated by a computer and being a total noob in this subject, I would like to get some suggestions from more experienced folks here.

So my workflow is basically this:

1. I generate the svg file in my browser using Javascript and download it as .svg

2. I put the shape in Illustrator, simplify it by merging the shapes and set the artboard's size to correspond to the shape width and height. Save and proceed.

I have all the characters I want to support as separate svg files with different artboard sizes (so they are not aligned to the same baseline, etc). Here is an example:

I imported them in FontForge, put the necessary shape into each corresponding letter and exported the font to try it out. The shapes are mapped to the keys and render properly, but they are not following the same baseline and the characted width seems to be off:

Here the character B is selected, but the width is all messed up.

What could be done in this situation? Do I have to change the shapes to fit into a common baseline by iterating the .svg files or can this be achieved in FontForge? I would also appreciate a recommendation for other popular font maker softwares.

EDIT: Since the shapes itself are quite detailed, the file size increases correspondingly. I try to simplify the svgs as much as possible, while still getting around ~40kb for each file. Is this a big problem for fonts? Do font providers have any limit on that? What would be a good font size (in terms of size on the harddrive) to strive for?

Answer 1

There is/was also a problem with exporting SVGs from illustrator regarding the exported viewBox when resizing the artboard - which is what you do in step 2 of your workflow (More Info/Questions about this issue). The solution could be to copy/paste every character into a new file, align the (character-)paths to the top left corner and then use the Object > Artboards > Fit to artwork bounds option. Till Illustrator 2015.3 (AFAIK) you can also select the specific paths and use the context-menu with your right-click and then select Export Selection and then select SVG rather than go the Save as-Way. Seems like Fontforge is importing the exported SVGs the right way, but Illustrator has exported them the wrong way (as stated above).

Disclaimer: I know the following sounds like a buying list, but I'm not related to any of the following manufacturers and I bought and I am using the following suggestions myself everyday.

Try out Fontself - a font-creator plugin for illustrator. It should be easier to fix baseline-problems with SVG-based imported paths.

Or try Glyphr Studio - a free open source font designer which was first build as web application and has a superb SVG import option.

I would also recommend to add SVGO to your workflow after creation of the origin-paths inbrowser and directly after (or during) export of the SVG-files. This could simplify the path which leads directly to a better and lighter path when importing and further simplifying in illustrator (if even necessary).

I also recommend the illustrator-plugin Vectorscribe to further simplify paths with the shipped Smart Remove Brush Tool which works like magic and reduces path points without (or with just a little - depending on settings) shifting other paths/curves/points.