Cool online tool for diecutters and other font lovers

If you follow this blog you know I love web apps and I am always on the lookout for new and cool ones. Mariairie left me a comment a couple of days ago with a link to IcoMoon, an icon font generator for web developers. At first I didn’t understand it or see any application for us diecutters, but the more I played the more excited I got. Here are some things you can do with IcoMoon:

Easily export all or selected glyphs in a font to individual SVG files.

1. Go to Free Font Converter, browse for your font and set the “…format to convert to” to SVG and click the big blue Convert button. An SVG font with the same name as your TTF will be downloaded to your computer (SVG fonts carry the .svg extension, just like a single SVG image)
   
2. Click the Import Icons button in IcoMoon and select the SVG font that you just generated. You will see all the glyphs from that font appear under “Your Custom Icons”
   
3. Click on the glyphs you would like to export to SVG. Selected glyphs will be outlined in yellow. To select multiples at once, click on the first and then hold down the shift key while clicking on the last one you want to select
   
4. Click the Images button. A zipped folder containing SVG versions of each glyph you selected will be downloaded to your computer. How cool is that?! Perfect for creating a specialized alphabet or for sorting images from a mixed theme dingbat font, among other uses we haven’t imagined yet.
   

Create a personal favorites dingbats font.

1. Go to Free Font Converter and convert each of the source fonts to SVG as shown in step 1 above.
2. Import your first font into IcoMoon as shown in step 2 above, select the glyphs you definitely do NOT want and press the trash can icon to delete them
   

   

3. Repeat this process with successive fonts until all your favorite glyphs appear under “Your Custom Icons”
   
4. Select the glyphs that make the final cut for your favorites font
   
5. Click the Font button
6. Type a character in the top box above each glyph and/or drag and drop glyphs to set their encoding (which key you will type to access each glyph)
   
7. Click the gear/flower icon and type a name for your font in the box and click the X to save it. (choose carefully as internal font names are not easily changed)
   

   

8. Click the Save button. A zipped folder containing TTF and SVG versions of the compilation font will be downloaded to your computer
   

   Note: The key word here is personal. Use these “mix” fonts on your own computer only. Please don’t use this technique to redistribute copyrighted fonts/glyphs/images.

Make your own dingbat font.

1. In Inkscape, Adobe Illustrator or other vector editor, create a set of SVGs you would like to compile into a font. (I am still experimenting with the format but starting using a 512 x 512 pixel high document seems to work.)
2. In IcoMoon, click the Import Icons button and navigate to your SVGs and import them.
3. Click and/or shift-click to highlight all of the SVGs which are now showing under “Your Custom Icons”
4. Click the Font button
5. Type a character in the top box above each glyph and/or drag and drop glyphs to set their encoding (which key you will type to access each glyph)
6. Click the gear/flower icon and type a name for your font in the box and click the x to save it. (choose carefully as internal font names are not easily changed)
7. Click the Save button. A zipped folder containing TTF and SVG versions of the compilation font will be downloaded to your computer

Caveat: So far I have only been able to get IcoMoon to work using Chrome as a browser.

About these ads