The starter font file – download this blank font file from Github to use as your starting point.This tutorial will be showing the Mac version, but the Windows steps are almost identical.

Inkscape – this is an open source vector drawing tool.

Adobe Illustrator – for preparing your SVG files (if you grab the ones I have included above, you can skip this step).If you need more, the noun project is a great resource. I’ve included a zip file here with a few symbols to get you started. Some SVG files – you will need some SVG symbols to embed in your font.Interactive versions can be accessed from within Inkscape, via Help menu > Tutorials. Here are a few things you will need before we get started: The official tutorials linked below are read-only. For example, using CSS you can easily change the size, color, add drop shadows or other text effects.īut 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. 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.

One solution to this problem is scalable vector graphics (SVG) since they scale infinitely while keeping the file size low. At the same time, more and more people are browsing on mobile devices where bandwidth is at a premium. 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.

Inkscape tutorials font squirrel