Dieter Petereit April 4th, 2014

Glyphter: New Free Service Helps You Build Your Custom Icon Font From Random SVGs In No Time

Glyphter.com is one of those services that got me immediately. It is simple to use, it works absolutely flawlessly, it is nicely designed and it keeps all of its promises. It even is free. What more could we want? Read on and build your own custom icon font using any SVG you have at hand while waiting for the bus.

glyphr_prefilled_icons

Glyphter Works With Any SVG and Supports Popular Icon Fonts

Glyphter looks like a creation born at Disney’s, aimed at children. Vivid colors, a cuddly mascot, large typo - just as if you could expect Dora the Explorer to jump out from behind the screen. Luckily, she doesn’t…

I am always skeptical with interfaces that simple. I experienced them to be tendentially poor with features and lacking usability if you dig in deeper. Not with Glyphter. The UI is a perfect match to the feature set. A documentation or even a short briefing is not necessary.

Once you started Glyphter, there are two main choices. Either click the book icon to the lower right edge of the browser window. This will open the icon font selector with half a dozen of the most popular icon fonts pre-populated. You’ll find Linecons, Font Awesome, Entypo and some more gems from there. Click and drag the desired icon to the center of the screen, where a reddish grid resides and drop the pictogram onto one of the empty squares.

Or click one of the empty squares directly. This will open your file system’s open dialogue. Browse to the location of your desired SVG and click “open”. Or drag and drop any SVG from your file system to the grid, which is basically the same, but much faster and only suitable for big resolutions, where you don’t run the browser in full size.

Once the icon from the desired font or your chosen SVG is loaded, it appears as a small preview on the grid. Hover your mouse over the grid square of each individual icon and you’ll notice an X, wich lets you delete this icon again. And you’ll notice a pen icon, which will open an editor to the left side of the browser window.

glyphr_edit_fonticon

The editor given you access to every single individual path of the SVG. With a set of iconized commands below the editor you are enabled to redraw the SVG. You can delete paths, move them, mirror or scale them. That way you are enabled to create new pictograms as you see fit.

glypher_edit_svg

Once you are done adding and editing, with the latter not being mandatory, give your font a name, click “Download Font” and the font will be downloaded in True Type format. During download you are asked to register, which is totally optional. If you do, your fonts stay stored and you don’t need to create them anew, every time you want to make a change. If you don’t want to have this possibility, proceed to “Just Download” and your TTF should arrive at your hard disk without further ado.

Glyphter.com can be used completely free of charge.

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *