Make a dingbat font with Inkscape

February 9, 2010 at 10:48 pm 70 comments

Buried in Inkscape .47 is the ability to make your own SVG fonts. This isn’t all that exciting because even Inkscape can’t use SVG fonts. However, pair this with a free font conversion tool and you now have a way to create your own TrueType fonts for free! The font creation features are not well developed yet, and there is precious little documentation, but after playing with this quite a while I have finally come up with a set of procedures that works. View/download the tutorial (PDF) here. View the video here. If you develop an original font for digital diecutters, please let me know so I can post it on my fonts page.

Related links

About these ads

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

SCAL vs Make The Cut feature war continues Character map templates for Inkscape and Illustrator

70 Comments Add your own

  • 1. Virginia  |  February 10, 2010 at 8:24 am

    Thanks for a great file. this is so cool!!

    Reply
    • 2. syb  |  April 21, 2010 at 2:08 pm

      would love a set of these have just bought a craft robot and am looking for nestabilities as I love them.
      thanks for sharing

      Reply
  • 3. Stephen Watkins  |  February 10, 2010 at 11:42 am

    This is a very cool looking process. FYI, I found this via a link to this post on Cartographer’s Guild. I won’t have time in the foreseeable future to try this process out, but I’m hopeful to give it a shot someday.

    Reply
    • 4. Kay  |  February 10, 2010 at 12:03 pm

      Stephen, thanks for stopping by and letting me know where you found out about this, so I can say Welcome, Cartographers!

      Reply
  • 5. Rachellann  |  February 10, 2010 at 12:55 pm

    hi created a tff font with my things and installed in in my Make-the-cut program.

    Reply
  • 6. thefrugalcrafter  |  February 11, 2010 at 10:04 am

    wow, you amaze me, I have wanted to be able to make a nice font, the free creator was fin but I couldn’t get to detailed with the designs, I printed the tut and will try sometime:)

    Reply
  • 7. Denise  |  February 12, 2010 at 7:37 am

    I have had so much fun making fonts since you posted this tutuorial. I know I would never have figured it out without your help! Thanks for taking the time to not only figure it out, but explain it so nicely that we can do it too!

    Reply
  • 8. Craig  |  February 13, 2010 at 5:15 pm

    Thanks Kay. Looks like I might need to upgrade from O.46. Been holding off with some of the compatability issues thought.

    Reply
    • 9. Kay  |  February 14, 2010 at 1:05 pm

      Lots of people keep both. Just install to different folders. .46 quit working for me months ago so I didn’t have any choice,

      Reply
  • 10. Debbie H  |  February 16, 2010 at 11:06 am

    Thanks, I am going to give this a try!

    Reply
  • 11. Brian  |  February 21, 2010 at 6:53 am

    Great tutorial – really good insight into something I thought INKSCAPE could do, but had no idea where to start. Now i can get some logo’s in as fonts.

    I came from the INKSCAPE forum…. btw.

    Reply
  • 12. Florin Florea  |  March 22, 2010 at 3:39 pm

    Great!
    I’ve been looking for some infos about the SVG Fonts in Inkscape and so I came to your blog.
    Great infos here, thanks.
    I hope I will be able to use the SVG Font feature and also hope the guys from Inkscape will develop it further on.
    I am playing with a digital tablet and the font6s would be some sort of calligraphic style.
    Thanks once again.

    Reply
  • 13. Video: Make a font in Inkscape « Clever Someday  |  March 27, 2010 at 2:35 pm

    [...] Written instructions, files and more information here. [...]

    Reply
  • 14. Denise  |  April 19, 2010 at 9:50 pm

    The online converter operation has changed since your tutorial came out. It no longer returns an archive, just your file.among other changes. You might want to update the instructions.

    Reply
    • 15. Kay  |  April 20, 2010 at 4:22 pm

      Thanks, Denise. I will, but in the meantime the instructions are correct in the video.

      Reply
  • 16. Jean  |  July 18, 2010 at 4:01 pm

    Hello,

    Thanks for the .svg file. How did you create it?
    when creating a new inkscape file, I am unable for instance to enter a matching string, how did you do that?
    I created a font with only lower cases and it worked very well but I am unsure on how to add a “white space” glyph.

    Thanks again!

    Reply
    • 17. Kay  |  July 18, 2010 at 9:29 pm

      Jean,
      Basically you click once so that glyph’s line is highlighted, then click again on that same line and in the “matching string” column. You will get an insertion box where you can type the character. Then press return. I found it to be temperamental, which is why I just made the svg instead of explaining it.
      I need to go back and add a space character to that file. Thanks for reminding me.

      Reply
  • 18. Andrew Braess  |  September 7, 2010 at 5:37 pm

    Hallo thank you for Tutorial but I have problem that can´t download the fontstarter.svg file.
    Thank you
    Andrew

    Reply
    • 19. Kay  |  September 7, 2010 at 6:59 pm

      Andrew,
      Please try again, I switched the file over to a more reliable host.

      Reply
  • 20. Font Editor « Klic-N-Kut.com Message Board  |  March 11, 2011 at 11:49 am

    [...] in Inkscape, which has a font creator of some kind.   Anyhow, here's a link to read about it:http://cleversomeday.wordpress.com/2010/02/09/inkscape-dings/ Posted 2 months ago [...]

    Reply
  • 21. DJ  |  April 28, 2011 at 8:11 pm

    In your video tutorial (which lead me to this post) you mentioned something about an xml editor to change the name of the ttf file converted from Online Font Converter. I can’t find that info. Can you please direct me to it? Thanks.

    Reply
    • 22. Kay  |  April 28, 2011 at 9:28 pm

      DJ,
      Download the PDF version of the instructions (link in the post). It’s in step 13.

      Reply
  • 23. bluefox.it  |  May 10, 2011 at 7:46 am

    Hi, great tutorial! I always wanted to be able to create my personal fonts via Inkscape and this page has been extremely useful.
    I hope you don’t mind if I write an italian translation of the instructions – obviously with reference to the original article.

    One question: does anybody know how to set the different width of every single character so to create non-monospaced fonts? :)

    Reply
    • 24. Kay  |  May 10, 2011 at 12:49 pm

      Bluefox, thanks for the translation and the link. You can set the letter spacing under the “kerning” tab, but that is out of scope for my knowledge and this tutorial.

      Reply
      • 25. geekfeet  |  May 13, 2011 at 9:32 pm

        If anyone figures out “kerning” (inkscape just freezes when i try to “add pair” to play with it for me :-/ ) I would LOVE to know!

  • 26. Matthew  |  May 20, 2011 at 11:43 am

    t h a n k y o u s o m u c h ! ! !

    Your SVG font files and video are a HUGE help.

    I hope that someone helps you in a like way very soon.

    All the best, Matthew

    Reply
  • 27. Becky Melton  |  May 21, 2011 at 4:04 pm

    Hi – I see the link to my dingbat map on this site and just wanted to say that my sitewill be moving soon. If you want to use the dingbat map in the future, the new link is pinellaswebvertising.com/di​ngb​atm​ap.​htm

    (I see no way to contact this blogger, so I hope the link on this site can be updated, as well.)

    Enjoy!

    Reply
  • 28. Butterfly  |  June 15, 2011 at 10:54 am

    When you are creating a font do you have to leave the already used graphic on the screen after you have used it?

    Also in your video you said to size them all together mine are already the same size can I size them individually when I get them on screen?

    Thank You For Everything !!!

    Reply
  • 29. Darcy Pasco  |  June 16, 2011 at 6:51 pm

    I got it figured out and got it done, I reread the pdf a little slower the second time around . Thanks. My font turned out Great.

    Reply
  • 30. Leonard  |  July 29, 2011 at 12:51 pm

    Thanks for the video tutorial. I somehow could not get my fonts uploaded into the online font converter. After clicking “select fonts”, I get an error from the website saying “Server I/O error”.

    At first, I thought it was my file being corrupted but I even tried to upload the fontstarter.svg and got the same error. Is it really a server error or am I missing come critical step?

    thanks for helping !

    Reply
    • 31. Ava Odoémena  |  March 9, 2012 at 9:40 am

      If the online font converter is giving you trouble, you can also download FontForge and convert the sgv-file to a ttf-file on your computer.

      FontForge looks both daunting and hell ugly, but once you’ve opened the sgv-file with FontForge, just go to /File/ and select /generate font/ , give it a name and save it.

      Reply
  • 32. Leonard  |  July 29, 2011 at 1:09 pm

    Sorry to bother. I managed to solve the problem with the downloading. It was my internet connection not set right.

    thanks for the great tutorial.

    Reply
  • 33. MeMoMeNoiDe  |  September 29, 2011 at 6:47 pm

    Hi… is there any way to do something like this with Adobe Illustrator?? I designed a typography in this program and would like to save it as a font.

    Reply
    • 34. Kay  |  September 30, 2011 at 7:54 pm

      Not that I know of, but you can probably export the glyphs for import into Font Forge, which is free, open source font making software.

      Reply
  • 35. How to Quickly Make a Font for Free | mox & fodder  |  October 5, 2011 at 3:07 pm

    [...] download an older version (0.47), but I would try the newest version first. You will have to follow this guide to get a grasp of how to import each letter into the font editor. An SVG font isn’t like the [...]

    Reply
  • [...] Vorlage findet ihr ganz unten in dem Blogeintrag “Make a dingbat font with Inkscape” auf cleversomeday, der mir sehr geholfen hat. Inkscape findet ihr hier, vermutlich [...]

    Reply
  • 37. pkiula  |  May 13, 2012 at 7:09 am

    Thanks Kay. About the Illustrator thing, can I copy a vector in Illustrator, paste it in Inkscape, and then do the necessary steps?

    Reply
    • 38. Kay  |  May 13, 2012 at 4:17 pm

      Not sure if you can cut and paste from AI to Ink, but you can import and then follow the rest of the steps, yes, or at least I think so.

      Reply
  • 39. I’ve made a font… kind of… - notizBlog  |  May 20, 2012 at 9:58 am

    [...] Make a dingbat font with Inkscape [...]

    Reply
  • 40. mariairie  |  July 12, 2012 at 10:25 am

    Thank you very much for the tutorial! Do you know if we can use words as matching strings instead of just one character?

    Reply
    • 41. Kay  |  July 12, 2012 at 3:15 pm

      Maria, Sure you can use a word, a phrase or a whole block of text if you want. It will only render in one color and you want to avoid open paths and intersecting paths, but other than that, you have a lot of leeway. Take a look at the thousands of fonts at dafont.com for examples of what will work in a font.

      Reply
      • 42. mariairie  |  July 12, 2012 at 3:35 pm

        Thank you so much for your quick response Kay! I meant using a word as a name of the character. I’m trying to make icons and I would like to call those by the icon name instead of a letter, so for a cart icon I want to use the word “cart” as a glyph name instead of just “a” for example, so when I write “cart” it will display the cart icon.
        Thank you very much Kay.

      • 43. Kay  |  July 13, 2012 at 4:37 pm

        Maria, sorry I misunderstood your question. No you can only use single keyboard keys for matching strings. There may be a way to do something similar to what you are talking about with ligatures or conditionals in an Open Type Font but that is way out of my area of expertise, and probably would require high end type creation software. Until then, please see my post on creating a character map for easy reference.

      • 44. mariairie  |  July 15, 2012 at 11:05 am

        Thank you very much again Kay. I have just found this app http://keyamoon.com/icomoon/app/ which allows me to import my font and assign words to the characters, so I think this will work for now.
        Thank you very much!

      • 45. Kay  |  July 15, 2012 at 2:28 pm

        Maria,
        Now that I see this, I realize what you were trying to do. Sorry I misinterpreted your question yet again. Fontforge may also allow you to name glyphs. Thanks so much for taking the time to get back to me. This link is over my head but very interesting and I look forward to playing around there.

  • 46. xadrezo  |  October 13, 2012 at 7:58 am

    Does it work with inkscape .48 too?

    Reply
    • 47. Kay  |  October 13, 2012 at 9:44 am

      Xadrezo, this tutorial was done with Inkscape .48 and it should also work with any version that is compatible with the Eggbot Hatch Fill Extension.

      Reply
      • 48. philcoop8192  |  December 19, 2012 at 3:13 am

        SVG Font Editor is broken in Inkscape 0.48 (0.48.2 r9819 on Ubuntu 10.04). I followed the tutorial on YouTube to the letter, and when I associate the glyph with the shape, nothing appears in the sample text area. Clicking on Path > Union doesn’t produce any results either. Useless.

      • 49. Kay  |  December 19, 2012 at 10:24 pm

        Phil,
        Sorry to hear that. Although this tutorial was specifically for 0.47, I just checked and it is working for me on the same build as yours (Inkscape 0.48.2 r9819) but I am on Mac OS. I know you said you followed to the letter, but just in case I will mention that the most common error is failing to retype the sample text so that it matches the glyphs you want to preview.

  • 50. DeadSea  |  October 19, 2012 at 7:09 am

    Useful, well done and well prepared information.. This is quiet important in the age of mass information platforms ;) Qualifying is a bit difficult :) Thanks for sharing..

    Reply
  • 51. cecilorett  |  April 5, 2013 at 2:59 pm

    Hi! I created my fonts easily. Thanks so much for the tutorial – my problem though is the space bar – it remains a black box. I tried to assign it as a space by entering text, then space, then deleting the text leaving just the space. Can you help? Thanks!

    Reply
  • 52. Hennie  |  May 12, 2013 at 5:03 pm

    Thank you very much for your great tutorial. I have made 3 fonts: bintje(the name of a dutch patato), ster (star) and fractal. It was so much fun to make, I hope you enjoy it. You can see and download the fonts on my website (dutch) http://www.sansevaria.nl/varia-fonts-2.html Thanks!!!!!!!!

    Reply
    • 53. Kay  |  May 13, 2013 at 8:53 am

      Great job, Hennie! Thanks for letting me know about the fonts you made!

      Reply
  • 54. Chessen  |  June 22, 2013 at 7:52 pm

    My font doesn’t seem to be preserving the width, every time I save, close and re-open it is set back to 1024. Any idea why that is happening? Thanks

    Reply
    • 55. Kay  |  June 22, 2013 at 9:09 pm

      The font making functionality in Inkscape is unpolished at best. Perhaps this is something you can edit in the xml code.

      Reply
  • 56. lnpellen  |  July 9, 2013 at 6:07 pm

    Thank you so much for this tutorial! I have tried making single line fonts after these instructions and during that process I wrote an extension to automate the add path to glyph part. I have posted a tutorial on my blog linking to you. Thought you ‘d like to know that.
    myscrappinginspiration.blogspot.com/2013/07/how-i-create-my-own-single-or-double.html?m=1

    Reply
    • 57. Kay  |  July 9, 2013 at 6:23 pm

      Thanks so much. Can’t wait to try this!

      Reply
  • 58. Font savant? | The Dew Abides  |  July 27, 2013 at 7:29 am

    […] boom!, I found a great blog with a workaround that was just what I needed. Essentially, the strategy was to import my scanned characters one at a […]

    Reply
  • […] If you want to get an inkling (no pun intended) of what is involved, and how relatively simple it is head on over to Cleversomeday‘s blog post on how to Make a dingbat font with Inkscape […]

    Reply
  • 60. khannaab  |  September 28, 2013 at 6:31 am

    Hi, i have successfully created these with the help of your tutorial. I have even converted the SVG file using an online converter to the format TTF and WOFF. The problem I am facing is that, when I use these on a webpage in a small size (say 12px) the icons, its lines, etc. become blurry or pixelated. However in a large size (say 48px) the icon is absolutely clear. Is there anything that I am doing wrong? Please advice.

    Reply
  • 61. Lisa  |  December 28, 2013 at 3:15 am

    Hi,
    Firstly thanks so much for this blog entry – I have really enjoyed creating my own fonts! The only problem I seem to be having is with the ‘missing glyph’ button. Is there a way to make this blank as when I use the font in Word the return/enter button has been allocated a missing glyph but I just want it to be blank. It is very annoying as every time I press enter the glyph appears! I have tried everything!
    Your help with this would be greatly appreciated.
    Thanks so much, Lisa

    Reply
    • 62. Kay  |  December 29, 2013 at 12:35 am

      Lisa, haven’t figured this out yet either and it bugs me too. Lets hope I have a brainstorm in the new year :)

      Reply
      • 63. LNpellen  |  May 10, 2014 at 2:41 am

        I do not know if you find this solution good enough, but I have used FontForge to add the space glyph. There I can select an undefined glyph and Element-Glyph info. Set Unicode value to U+0020 and then select glyph name = space.

  • 64. zico_newbie  |  May 12, 2014 at 2:30 pm

    thanks of tutorial, how to edit font spacing/margin in Inkscape ?

    Reply
  • 65. mrscwooddell  |  June 26, 2014 at 12:53 pm

    Thank you for the tutorial. I understand how to use Inkscape and all that but cant get the OFC website to work, it gives me a file type that is called tar.gz and when I try to open it it shows errors…? Anyone else have this happen?

    Reply
    • 66. Kay  |  June 26, 2014 at 9:07 pm

      You will either need to download software that can expand .gz files or use an alternate font converter.

      Reply
  • 67. JJM  |  July 10, 2014 at 3:23 pm

    Hi, thanks for the information. It all works but I’m experiencing a problem that baffles me. Even though the icons I make are the same height and width in Inkscape, (I sized them using the X/Y boxes below the menu bar and made all the icons the same dimensions) they don’t seem to fill up the same amount of space as characters in the font. I’ve also done my best to make sure they are the same alignment as well.

    For example, even though icon A and icon B are the same size in the main Inkscape window they come out very different sizes as characters. So A is a good size and B is about half the size of A.

    Any tips on how to make them be the same size to each other would be greatly appreciated! Whether it be something within inkscape or some other program.

    Reply
    • 68. Kay  |  July 11, 2014 at 10:06 am

      There are definitely quirks. The only thing I can suggest is to make sure you use path>union for each character.

      Reply
  • 69. Dimitris Rentzis  |  September 7, 2014 at 2:04 pm

    Can you please tell me how to download fontstarter.svg. I did a google search and it is no where to be found.
    Thanks
    Dimitris

    Reply
    • 70. Kay  |  September 7, 2014 at 2:36 pm

      Hi Dimitris,
      Click the fontstarter.svg link on this page and it will take you to box.com where you can download the file.

      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,919 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,919 other followers

%d bloggers like this: