Hi community - newbie here, but hoping to ramp up quickly with your help! I'm building an icon font. We currently have ~400 icons in SVG format, and I'm trying to convert them into a variable font format (we have various weights, filled vs stroke style). I couldn't find any good guides online, so hopefully as I learn more here it will serve others in the future as well!
1. ARTWORK SETUPFirst, we setup a design space with a 16-pixel grid as our minimum display size. Icon design was (and still is) done with strokes instead of fills so that we can tweak the stroke width for different weights down the road. The drawback here is that you have to make sure the line nodes are on .5 on the grid so that a 1-pixel width stroke fits between grid lines/pixel boundaries and has visual alignment. We then exported them to a pile of SVG files.
2. FONT SETUPWe're using 640 UPMs for the project.
I saw some file savings with lower UPM values, but go too low and the quality suffers. I had aimed for a multiple of my icon grid (16px) and initially landed on 512 UPMs, but a good Samaritan (thank you!) on another forum suggested also hitting a multiple of 10 to make it easier to find stray nodes and check alignment. This means nodes aligned to whole or half grid units will be a whole number ending with a zero!
I'm not sure how important the ascender/descender values are for an icon font, but I set them to 0, safe top/caps height/x height to 640 and safe bottom to -160 (it auto-set).... all to try and make it into a single unit without extra spacing around it to deal with.
Naming seems to be pretty straightforward, especially with the Build Names button!
3. IMPORTING ARTWORK (SVGs)I had to remove the hyphens from all filenames... FL has some issues processing it. I think there is some sort of automation related to filenames that I ran into by accident. It crashed FL multiple times before I figured out the problem.
I also turned up this on customizing unicode assignment so that I could have a predictable unicode addresses when making updates and iterating (
https://help.fontlab.com/fontlab-vi/Custom-data-files-and-locations/). After that, I just drag-and-dropped the files into FL's glyphs tab. Fortunately, the artwork came in and was the right scale/position (phew!).
4. ADJUST SIDEBEARINGSI wasn't sure if I should keep them or make them zero, but I kept them just in case icons were put side by side for whatever reason. Select all of the icons in the glyphs tab, right-click and select Actions... > Metrics > Set sidebearings to 40 on both sides (at 16px, 40 units = 1px in the 640 UPM scale).
5. CONVERT TO EDITABLE SVGI haven't figured out a way to do this in bulk yet, unfortunately, so I think I have to open each glyph, right click the artwork, and select Make SVG Editable. As far as I can tell, this converts the vector artwork to contours like a regular font vs embedding an SVG-formatted asset into the font.
Note: do this after the sidebearings because while it's still SVG, it treats the entire SVG frame as content. This helps keep it uniform. If you make the SVG editable first, it will measure out from the artwork, and that can vary between icons.6. EXPORT THE FONTThis one is pretty straight forward. Remember to unload/reload the font when you make changes if you're testing it somewhere.
One thing to look out for is whether it makes multiple files at this point. I kept seeing two files when forgetting to Make some glyph's SVG artwork editable. There should be only one file exported at this point.
And that's where I am so far. If anyone has any recommendations or guidance on the above or anything that follows, please let me know. I'm new to all of this, but trying to learn. Thanks!