Create Your Own Fonts Using Inkscape and Fontastic.me

01
of 06
Create Your Own Fonts Using Inkscape and Fontastic.me

Create Your Own Fonts Using Inkscape and Fontastic.me
Text and images © Ian Pullen

In this tutorial, I'm going to show you how you can create your own handwriting fonts using Inkscape and fontastic.me.

If you're not familiar with these, Inkscape is a free and open source vector line drawing application that's available for Windows, OS X and Linux. Fontastic.me is a website that offers a variety of icon fonts, but also allows you to upload your own SVG graphics and convert them to a font for free.

While designing a font that will work effectively at various sizes with carefully crafted letter kerning is a skill that can take years to hone, this is a quick and fun project that will give you a unique font. The main aim of fontastic.me is to produce icon fonts for websites, but you can create a font of letters that you could use to produce headings or small amounts of text.

For the purpose of this tutorial, I'm going to trace a photo of some written letters, but you can easily adapt this technique and draw your letters directly in Inkscape. This might work especially well for those who use drawing tablets.

On the next page we'll get started with creating our own font.

02
of 06
Import a Photo of Your Written Font

Import a Photo of Your Written Font
Text and images © Ian Pullen

You'll need a photo of some drawn letters if you want to follow along and if you don't want to make your own, you can download and use a-doodle-z.jpg which contains the capital letters A-Z.

If you are going to create your own, use a dark color ink and white paper for strong contrast and photograph the completed letters in good light. Also, try and avoid any closed spaces in letters, such as the 'O' as this will make life more complicated when preparing your traced letters.

To import the photo, go to File > Import and then navigate to the photo and click the Open button. In the next dialog, I advise that you use the Embed option.

If the image file is very large, you can zoom out by using the options in the View > Zoom sub-menu and then re-size it by clicking once on it to display arrow handles at each corner. Click and drag a handle, while holding the Ctrl or Command key and it will keep its original proportions.

Next we'll trace the image to create vector line letters.

03
of 06
Trace the Photo to Create Vector Line Letters

Trace the Photo to Create Vector Line Letters
Text and images © Ian Pullen

I've previously described tracing bitmap graphics in Inkscape, but will quickly describe the process again here.

Click on the photo to ensure that it's selected and then go to Path > Trace Bitmap to open the Trace Bitmap dialog. In my case, I left all the settings to their default and it produced a good, clean result. You may need to adjust the trace settings, but you may find it easier to shoot your photo again with better lighting to produce an image with stronger contrast.

In the screen shot, you can see the traced letters that I have dragged away from the original photo. When the tracing is completed, the letters will be placed directly over the photo, so they may not be very obvious. Before moving on, you can close the Trace Bitmap dialog and also click on the photo to select it and click the Delete key on your keyboard to remove it from the document.

04
of 06
Split the Tracing into Individual Letters

Split the Tracing into Individual Letters
Text and images © Ian Pullen

At this point, all of the letters are joined together, so go to Path > Break Apart to split them into individual letters. Note that if you have letters that are made up of more than one element, these will also have been split into separate elements. In my case, this applies to every letter, so it makes sense to group each letter together at this stage.

To do this, just click and drag a selection marquee around a letter and then go to Object > Group or Press Ctrl+G or Command+G depending on your keyboard.

Obviously, you only need to do this with letters that contain more than one element.

Before creating the letter files, we'll re-size the document to a suitable size.

05
of 06
Set the Document Size

Set the Document Size
Text and images © Ian Pullen

We need to set the document to a suitable size, so go to File > Document Properties and in the dialog, set the Width and Height as necessary. I set mine to 500px by 500px, though ideally you would set the width differently for each letter so that the final letters fit together more neatly.

Next, we'll create the SVG letters that will be uploaded to fontastic.me.

06
of 06
Create Individual SVG Files for Each Letter

Create Individual SVG Files for Each Letter
Text and images © Ian Pullen

Fontastic.me requires each letter to be a separate SVG file, so we'll need to produce these before pressing on.

Drag all of your letters so that they are outside of the page edges. Fontastic.me ignores any elements that are outside of the page area, so we can leave these letters parked here with no problems.

Now drag the first letter into the page and use the drag handles at the corner to re-size it as necessary.

Then go to File > Save As and give the file a meaningful name. I called mine a.svg – ensure that the file has the .svg suffix.

You can now move or delete the first letter and place the second letter onto the page and again go to File > Save As. You need to do this for each letter. If you've more patience than me, you may adjust the width of the page as you go to better match each letter.

Finally, you may want to consider producing punctuation, though you will definitely want a space character. For a space, just save a blank page. Also, if you want upper and lower case letters, you need to save all of these too.

Now you can pay a visit to fontastic.me and create your font. I've explained a bit about this process in an accompanying article that explains how to use that site to make your font: Create a Font Using Fontastic.me