Skip to content

Latest commit

 

History

History
22 lines (16 loc) · 1.63 KB

README.md

File metadata and controls

22 lines (16 loc) · 1.63 KB
Raw

Introduction

We can edit the SVG of each icon in Figma, Inkscape, Adobe Illustrator or whatever tool we prefer.

We use FontForge to generate the font. Here is a small tutorial:

Add a glyph to the font

  1. Install FontForge and open DevToys-Tools-Icons.sfd.
  2. In Figma, Inkscape, Adobe Illustrator or else, create a glyph and export it as a SVG.
  3. In FontForge, go to Encoding > Add Encoding Slots.
  4. Select the slot you just created and go to File > Import and select the SVG you want to import. Under Options, uncheck Scale to fit (Misc).
  5. Then, go to Element > Glyph Info and set a glyph name and Unicode value like U+0100.

Generate a TrueType font

  1. First, we need to validate the change we made. Go to Element > Validation > Validate...
    • Typical error we encountered in the past is Self Intersecting. You can resolve it automatically by using Element > Overlap > Remove Overlap. If it made the glyph ugly, you will have to fix the issue manually by editing the SVG.
    • Another typical error we encountered is Non-Integral Coordinates. To fix it automatically, use Element > Round > To Int.
    • Another error is Missing Points at Extrema. To fix it, use Element > Add Extrema.
  2. Once there are no validation issues anymore, go to File > Generate Fonts. Select TrueType and check Validate before saving. Then click Generate.
  3. A TTF file should be generated. You can verify that it works well by trying to open it in the app Character Map UWP.