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
If you grabbed my sample SVG files you can skip this step, but if you are using your own vector images you will probably need to run them through Illustrator first. First, open your vector image and select it. Then from the menu select Object -> Compound Path -> Make. Finally, select File -> Save As for format select SVG (svg) and then save it somewhere you can easily find it. An SVG Options window will popup, just leave the default options and click OK.
Step 1: Get Inkscape ready
Open the starter font file in Inkscape. Go ahead and save it with a new name, I’m calling mine awesomesauce.svg
. Next, from the Text
menu, select SVG Font Editor
. This will enable the font editor pallet on the right side. Your window should look like this:
Step 2: Font family name
In the SVG Font Editor
on the right hand side of the window click on font 1
so it is highlighted. Then, in the Family Name
text box, give your font family a name. Again, I’m using awesomesauce
Step 3: Import a symbol
Now it’s time to add the first symbol to our font. From the File menu, select Import. Select the svg file you want to add to your font. I’m going to select intridea.svg (what symbol font would be complete without the Intridea logo?).
Step 4: Size the symbol
Now we need to size the symbol. It’s good to keep all your glyphs a similar size. Experimenting has shown me that keeping them about 750px high in Inkscape will keep them roughly the same height as a capital letter. In the top tool bar, click the Lock
icon to lock the aspect ratio and manually enter the hight as 750px
Step 5: Position your symbol
Positioning the symbol is also very important. Move the symbol to the bottom of the work area. You can do this easily by entering 0px
in the Y
box on the toolbar. Then, center the symbol (you should see a centered guide line to help you, and you can use the arrow keys for minute adjustments). Once you have it sized and positioned properly, it should look like this:
Step 6: Add a symbol
Now it’s time to add the symbol to your font. Make sure the symbol is selected by clicking on it (it should have a box around it). Over in the SVG Font Editor
palette, click on font 1
then click the Glyphs
tab. Then, select glyph 1
a so it is highlighted and finally, click the Get Curves from selection
button. This will assign that shape to the selected glyph. In this example, the lower case a.
Step 7: Test your font
You can test if it worked by entering a lower case a into the Preview Text
window. If it worked, you should see the Intridea logo in the preview area!
Step 8: Rinse and Repeat
If you are happy with your symbol you added, delete it from your work area and repeat steps 3 through 7 adding each symbol to a different glyph. When you are done, save your file and head to step 9.
Step 9: Convert to a TrueType Font
Next we need to convert this to a usable font. So head to
. Click the Chose File
button and browse for your file you saved in step 8. From the Select a format to convert to
: select ttf(TrueType)
and click the Convert
button. Your browser should download your new font file.
Step 10: Generate a @font-face kit
In this step we will generate a font-face kit that is compatible with almost all browsers. The downloadable kit features great instructions on using your font on the web. Head on over to the Font Squirrel font-face generator
. Click the Add fonts
button and select your TrueType font from step 9. Select the Optimal
setting, agree to their terms and click Download Your 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.