Food Type Icon Font Creation

Context

To produce a good icon font, there are a few important steps that must be followed. This short guide will help you to create a great icon font for your app.

Instructions

1. Download, install, and open FontForge. It's a free open-source font editor that is available for Windows, macOS and Linux. It's a an excellent choice for anyone who wants to create their own unique icon fonts:
   
   
   
2. When you open the program, the first step is to input the correct font details. This is essential to ensure that the font is recognized in our system and functions properly.
   So:
   - Click on Element in the top menu bar
   - Then select Font Info from the dropdown menu (like on the first image)
   - After opening the Font Info window, you should see three input fields. In each of these fields, enter the name of your font as iconfont. Once you have entered the name in all three fields, click the OK button to confirm and save the changes (like on the second image):
   
   
3. After saving the font details, the next step is to add the vegan and vegetarian icons you previously created as SVG in a vector editor, like Illustrator. You can do this by selecting appropriate letters to represent them and importing the corresponding SVG icons into those letters. 
   Select the capital letter A to represent the vegetarian option and the letter B to represent the vegan option. Double-click on the chosen letter to open the page inside, like so:
   
   
   

4. After opening the page inside the chosen letter, go to File in the top menu bar and select Import. Go to the location of the SVG icon file on your local drive and click the Import button. This will add the SVG icon inside the selected letter, like shown below:

5. Once the icons have been imported, you need to align them correctly - this is very important. To do this, select the icon using the CMD+A or CTRL+A command (depends if you're working on Mac or Windows) and adjust its alignment as required. After aligning the icon, click the Close button to save the changes and close the glyph editor:
   

6. After completing all the above steps, you should be able to see that the vegetarian icon has been successfully added inside the letter A:
   
   
   Please note: you should repeat the exact same steps to add a vegan icon to the letter B.
   
   

7. The final step is to export the font you've created. Once you have completed this step, your icon font should be fully functional and ready to be added to the customization center. To do this, go to File and click on Generate Fonts. Then in options, go for OpenType as the format you want to export it and the location where the font should be exported to:
   Once you've done this - you just have to click on Generate to finalize the whole process.

And there you have it!