- Aug 31, 2017
Easily make your own icon fonts through a few simple steps
Web fonts are fantastic! Now how do we make our own?
First of all, what are web fonts, and why use them?
Essentially, you can call any .ttf, .woff2, or any font file that’s being hosted by a server and used by any website a "web font”. They allow designers and developers the ability to take advantage of a wide range of exciting typography simply by linking to the font files!
Who is this tutorial for?
Any developers, designers, DIY business-owners or web-moguls who just needs that one special icon set for their site and has had experience creating vector-based work.
Great. Now how do we make and use our own custom web fonts?
The process is pretty simple, but it could be really confusing if you’re just starting out. Here’s a quick synopsis: You start by creating your own set of icons as SVGs using your favorite vector-editing software, and then you import your SVGs to the coveted Icomoon App! I’ll even show you a couple of different ways. Let’s get started.
Creating Your Vector Icons
The exported SVGs must be in their own separate files. To prepare ourselves for this, make as many separate artboards for each icon that you think you would need (you can easily add or delete icons later on, so don’t worry about not getting the exact number). We’re using Adobe Illustrator for this particular tutorial, but any vector-based editing software would work!
Turn Everything into a Shape
This is very important: As you create your own icon set, be sure to convert all strokes into solid shapes, as shown on the gif above. Additionally, clean up your lines as much as possible. Stray or unnecessary points can cause glitches when displaying or exporting your web fonts.
Once you’re all done, simply export your artboards into separate SVG files. We’re using the “Export for Screens” function on Illustrator in this example as it lets us curate the list and set a prefix for the final files.
Converting Icons to a Font / Web Font
Import Icons into the IcoMoon App
IcoMoon houses this magnificent font-creation app that makes you seem like a pro. At this stage, we are simply importing our beloved SVGs into the app. You would then highlight all the icons that you would like to export into your final font files, and hit the “Generate Font” button on the bottom-right side of the screen once you’re ready. This takes us to a page where we can easily customize our would-be font’s settings, metadata, UTF to character configuration, and more!
Configuring and Exporting Your Font Files
If you’ve ever wanted to name your very own font, this is your chance! IcoMoon’s interface allows you to edit each icon’s UTF value, edit font prefixes, and so much more. When you’re satisfied with the settings, just hit that “download” button on the bottom-right side of the screen and voila – your very own icon font ready to use locally and for the web!
Using Your Awesome New Font
Copy and Paste Method
After installing the font to your system, you can effortlessly use the preview boxes that IcoMoon provides to copy your custom icon into whichever editor that you are using. Don’t forget to set the typography to that font’s name.
Web Method: UTF Characters
Another way of accessing your fonts locally and on the web is to utilize the UTF values of each character. To do this on a Mac, set your input type to accept the Unicode Hex Input, then just hold the Option key while you type in the values. If you’re on a PC, you would just need to hold down the Alt key.
Congratulations! You can now create, configure, and use your own custom web font!
The exported ZIP file from IcoMoon should also contain a “Read Me.txt” file that will teach you about other ways of using the font. Lastly, there are some frameworks that have moved onto using the woff2 font format instead of woff. IcoMoon’s free version does not include this upon export, so if you need it, show IcoMoon some love by using a paid version, or you can try one of those woff to woff2 converters.