Part of How to make a font
Go here: https://icomoon.io/app/#/select
- Use the hamburger menu in the top left to create a New Empty Set
- Use the hamburger menu in the top right of the new set to Import to Set
- This is where some of the icons might not appear correctly in Icomoon, since doesn’t support fill-rule=“evenodd” (or something like that)
- If that’s the case, go back to the SVG file and use picosvg to fix it, and then reupload it to Icomoon.
- You can upload an empty SVG of the correct width to set the space width, although it is easier to mess with the space width in the Python fix_font script.
- Use the same hamburger menu to Select All
- Go to the Generate Font tab in the bottom right
- Type in the correct character for each glyph (in the box with the little blank rectangle in it, not the character code box)
- You can make ligatures by selecting the fi icon in the top left (“Show Ligatures”) and then typing the ligatures into the ligature input under the correct glyph.
- You can set the baseline height by clicking the gear icon next to the download button and going down to “Font Metrics”
- The whole font height, including descenders, is 1em tall.
- I’ve found that around 30% for the baseline height seems to work well.
- The whitespace width is extra space between characters. I’m not sure how Icomoon applies this. I assume half that width is added to all the glyph bearings.
- You can also set a name and version and other stuff for you font from the settings next to the download button.
- Finally, download your font (bottom right)
- You have to extract at least the font file you’re interested in to use it or do more work on it.
Note: The demo.html file won’t work correctly unless you extract everything, but you can still open it (it won’t have interactivity or the correct font)