Cool online tool for diecutters and other font lovers

July 18, 2012 at 9:23 pm 18 comments

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

Entry filed under: Computer Crafts, Cricut, Digital Scrapbooking, Silhouette. Tags: , , .

Print and cut with CCR tutorial video How to make your own “print and punch” designs

18 Comments Add your own

  • 1. Rebecca S.  |  July 18, 2012 at 11:08 pm

    Kay – thank you for taking the time to explain how to do this. It is very much appreciated. =)

    Reply
  • 2. Diane  |  July 19, 2012 at 2:33 am

    This is sooo cooool! Thanks for telling us how to….

    Reply
  • 3. Mz Daisy/ Diane  |  July 19, 2012 at 6:34 am

    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!

    Reply
  • 4. Debbie aka doodlingdebbie  |  July 19, 2012 at 2:45 pm

    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

    Reply
    • 5. Kay  |  July 19, 2012 at 3:21 pm

      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…

      Reply
  • 7. Christine  |  July 22, 2012 at 4:56 pm

    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

    Reply
  • 8. PapaSue  |  July 24, 2012 at 12:12 am

    Well I know what I will be doing tomorrow! What fun as well as useful.

    Tks

    Reply
  • 9. Linda Reynolds  |  August 1, 2012 at 10:38 am

    My Mac fonts do not have file extensions and are not recognized by the online converter. How did you handle this?

    Reply
    • 10. Kay  |  August 1, 2012 at 1:41 pm

      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.)

      Reply
  • 11. Annette  |  October 24, 2012 at 2:56 pm

    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!

    Reply
    • 12. Kay  |  October 24, 2012 at 3:11 pm

      Make sure you have selected the correct settings and if it still doesn’t work, try a different browser or a different conversion site.

      Reply
  • 13. Elizabeth Barnett  |  October 20, 2013 at 4:09 pm

    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….

    Reply
    • 14. Kay  |  October 20, 2013 at 8:15 pm

      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.

      Reply
  • 15. Nina Adams  |  February 26, 2014 at 1:39 am

    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.

    Reply
    • 16. Kay  |  February 26, 2014 at 12:05 pm

      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.

      Reply
  • 17. careyon151  |  March 19, 2014 at 12:45 am

    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???

    Reply
    • 18. Kay  |  March 19, 2014 at 10:23 am

      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.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,635 other followers

Follow me on Twitter

Cricut and Sure Cuts A Lot Top 40
Silhouette Top 40
Sure Cuts A Lot Top 40
Make The Cut Top 40

Follow

Get every new post delivered to your Inbox.

Join 3,635 other followers

%d bloggers like this: