How to create custom fonts

1. Create the font in SVG format using an editor like illustrator. Make sure the document size for all SVGs to be used is square (typical size is 24px by 24px). Another thing to consider is the fact that the vector image has to be centered all the time and that either widths or heights have to be consistent for all of them.
2. Once SVG assets are ready, head over to icomoon.io 
3. Sign up and sign in
4. Click the “icomoon app” button at the top
5. Click “new project”
6. Click “Import icons” button at the top
7. Add all the SVGs to be used in your font family
8. Highlight all of them and click the “generate font” tab at the bottom
9. Optional: here, u can add custom code points or “ligatures” (the latter allows the use of elements like <span class=“my-font”>envelope</span> to show an envelope icon for example)
10. Next to the download tab at the bottom, click the gear button. Make sure IE8 and “encode and embed font in CSS” option is checked.
11. Optional: In this same pop up you can include a custom class prefix and class name for your font family.
12. Click the “download” button to download the font family bundle.
13. Extract the contents of the downloaded file and look for the “fonts” folder. This contains your font files.

Adding fonts to your Website:

1. Move or copy/paste fonts dir in the your own style directory for the site. 
2. Copy style.css and paste contents into a separate fonts file like _fonts.scss or fonts.css (important: please rename “src: url()” to   the eot file under the fonts directory