Clever Someday

create smart

Make a dingbat font with Inkscape

by

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

(Visited 24,007 times, 1 visits today)

Comments

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

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

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

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

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

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

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

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

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

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

  5. 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!

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

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

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

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

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

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

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

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

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

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

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

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

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

  15. I clicked on the link to go to BOX.com and I see a download button but it does not download. Why am I a failure?

    • You are not a failure. Many are having issues with box.com today. I am working to resolve. Please check back later.

Trackbacks

Categories

75 Follow
Our Disclaimer