How To Make Your Own Symbol Font
With the advent of high resolution “retina” displays, keeping bitmap images sharp and crisp on the web has meant using larger and thus more bandwidth-hungry images. At the same time, more and more people are browsing on mobile devices where bandwidth is at a premium.
One solution to this problem is scalable vector graphics (SVG) since they scale infinitely while keeping the file size low. However, now that web fonts are widely supported, symbol fonts like Dingbats or WebDings provide another option for tack sharp symbols used in icons or buttons. Fonts are also very flexible. For example, using CSS you can easily change the size, color, add drop shadows or other text effects.
But what happens when symbol typefaces don’t have the symbols you need? Well, make your own of course! Today I am going to show you how make your own symbol font using some freely available software and tools, which you can then easily embed in a web page and use in your design comps.
Here are a few things you will need before we get started:
- Some SVG files – you will need some SVG symbols to embed in your font. I’ve included a zip file here with a few symbols to get you started. If you need more, the noun project is a great resource.
- Adobe Illustrator – for preparing your SVG files (if you grab the ones I have included above, you can skip this step)
- Inkscape – this is an open source vector drawing tool. It’s available for Windows or OS X. This tutorial will be showing the Mac version, but the Windows steps are almost identical.
- The starter font file – download this blank font file from Github to use as your starting point.
Step 0: Prepare your SVG files in Illustrator
Step 1: Get Inkscape ready
Step 2: Font family name
Step 3: Import a symbol
Step 4: Size the symbol
Step 5: Position your symbol
Step 6: Add a symbol
Step 7: Test your font
Step 8: Rinse and Repeat
Step 9: Convert to a TrueType Font
Step 10: Generate a @font-face kit
You did it!
Open up the folder you downloaded in step 10. In the folder, you should see a .ttf TrueType font. In my case, it’s called awesomesauce-webfont.ttf. Double click it to open the font and install it. Now your font is available anywhere in your OS to use in your design comps!
In the folder you will find an HTML demo file from Font Squirrel. In my example, it is called awesomesauceRegular-demo.html. Open this file in a browser. It will show your font as well as provide instructions on embedding your font in a web page. Also, be sure to check out Pictos for some more info on using icon fonts.
View Barg Upender’s MoDevUX Talk: “What Is Mobile First and How Does It Help Build Better User Experience?”