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.
- 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)
- 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”
- 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
- 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.
- Go to Free Font Converter and convert each of the source fonts to SVG as shown in step 1 above.
- 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
- Repeat this process with successive fonts until all your favorite glyphs appear under “Your Custom Icons”
- Select the glyphs that make the final cut for your favorites font
- Click the Font button
- 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)
- 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)
- 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.
- 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.)
- In IcoMoon, click the Import Icons button and navigate to your SVGs and import them.
- Click and/or shift-click to highlight all of the SVGs which are now showing under “Your Custom Icons”
- Click the Font button
- 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)
- 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)
- 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.
(Visited 1,070 times, 1 visits today)
Kay – thank you for taking the time to explain how to do this. It is very much appreciated. =)
This is sooo cooool! Thanks for telling us how to….
Kay, what a wonderful find. I’m sure I’ll be using this alot. You are the greatest a fiding the most useful things and explaining them to us, too. Thanks!
Hi Kay, This is great! I am having a bit of an issue.If I try to open the .svg files in Studio I get an error message saying “This file is not supported”. I have the Designer Edition so it should be able to open the .svg files. Would you know what I may be doing wrong? Thank you for sharing this. I know it’s going to be exciting when I read your blog. xxx- Debbie
Hi Debbie, and I always know when I see a comment from you that it is going to be sweet!!
I am not having any problem opening the SVGs in SS on my Mac. See you over at the Silhouette Plus Forum for some troubleshooting…
Thank you Kay, I’m headed back over to the forum. xxx
This is fabulous Kay, been having a play and it’s just what I need. Thank you for the instructions on how to use both programs, it is much appreciated.
Hugs
Christine x
Well I know what I will be doing tomorrow! What fun as well as useful.
Tks
My Mac fonts do not have file extensions and are not recognized by the online converter. How did you handle this?
Good question and I’m glad you asked it because it might explain why some of us are having some fonts not work. Click on the font’s icon and click command-I for Get Info. Go to where is says Hide Extension and uncheck the box. If that doesn’t work just add the appropriate file extension to the name of the font (.ttf, .otf. .suit, etc.)
Hey, What would cause the Font Converter to not convert a .ttf? I have tried several dings and I get an error. I was just wondering what would cause that.
Thanks so much for sharing your great wealth of knowledge with us!
Make sure you have selected the correct settings and if it still doesn’t work, try a different browser or a different conversion site.
IcoMoon doesn’t work as above; selecting only certain glyphs gives me the entire set; deleting everything “else” and selecting what’s left ‘still’ gives me the entire set….
The beauty of web apps is that they can be updated so easily. The down side is that tutorials are often outdated soon after they are posted, as is the case here. My advice is to follow the app’s latest instructions, and consider my tutorials only as an example of what can be done. I love to cover web apps, but simply can’t keep up with the constant changes to all of them.
Kay- I have really found all your tips so helpful and have been voraciously reading all I can that you have posted or blogged. Your advise is always sound and much appreciated.
One issue: Have you tried this lately? It is a website that is no longer available. I got a “error 500 –server not found” or I get redirected to a Yahoo page for other converters (costly ones at that). I tried IE 11 (was using Chrome before), but still nothing.
I’ve found a couple of other converters out there that are free, but the svgs they convert to end up not being able to import to SSDE. They show up as IE docs with all the code shown for the glyphs. Help.
Nina, thanks for your kind comments. Sorry you are having trouble. I just double checked and Icomoon is still working for me. Maybe check back in a day or so, or Google to see if you have a missing plug in or something. These web apps sometimes go down for maintenance, or something. fontastic.me is another alternative, but I haven’t tried it yet.
As far as the SVGs you are describing from the other converters, that sounds correct. SVGs are actually a type of html file which are a type of text file, so they often map to the browser and look like code when opened. They still should open from within Silhouette Studio. You may have to change their file associate first. I’m not a Windows expect so I’ll refer you to Google for that, too.
Hello, You have a great blog. I’ve been poking around your blog and you tube videos and have really learned so much. Thanks so much for posting such useful informaiton. I have a questions regarding the free online font converter. I’ve tried to use it in Firefox and Google and can only get an Error Message. I’ve followed your directions and just get the error message. Wondered if anyone else was experiencing the same problem. I go to the link you have above, go to my font files and pick a ttf or otf and pic choose svg as format to convert to and click the big blue convert button and only get
500 Internal Server Error. can you help???
It’s not unusual for any web app to have temporary hiccups or even to disappear altogether. Google “online font converter” and you will find several other choices you can use in the meantime.