Create a Hand Drawn Font Using Illustrator and Fontastic.me

Make Your Own Font with Illustrator

Ian Pullen

In this tutorial, we're going to show you how you can create your very own font using Illustrator and the online web service fontastic.me.

To follow along, you'll need a copy of Adobe Illustrator, though if you haven't got a copy and don't want to buy it, you may be interested in our similar tutorial that uses InkscapeInkscape is a free, open source alternative to Illustrator. Whichever vector line drawing application that you use, fontastic.me offers its service completely for free.

While we're going to show you how to create a hand drawn font using a photo of letters drawn on paper, you can also use similar techniques to produce a font using letters that have been drawn directly into Illustrator. If you use a drawing tablet, this might be preferable to you.

If using a photo, ensure that you use a dark color pen to draw your letters and use plain white paper for maximum contrast. Also, take your photo in good light to help produce a photo that is clear and contrasty to make it as easy as possible for Illustrator to trace the individual letters.

Open a Blank Document

Open a Blank Document

Ian Pullen

The first step is to open a blank file to work in.

Go to File > New and in the dialog set up the size as desired. We used a square page size of 500px, but you can set this as desired.

Next, we'll import the photo file into Illustrator.

Import Your Photo of Hand Drawn Text

Import Your Hand-Drawn Text

Ian Pullen

If you haven't got a photo of hand-drawn text to work from, you can download the same file that we've used for this tutorial.

To import the file, go to File > Place and then navigate to where your photo of hand-drawn text is located. Click the Place button and you'll see the photo appears in your document.

We can now trace this file to give us vector letters.

Trace the Photo of Hand Drawn Letters

Trace the Photo of Hand Drawn Letters

Ian Pullen

Tracing the letters is very straightforward.

Just go to Object > Live Trace > Make and Expand and after a few moments, you'll see that all of the letters have been overlaid with new vector line versions. Less obvious is the fact that they will be surrounded by another object that represents the background of the photo. We need to delete the background object, so go to Object > Ungroup and then click anywhere outside of the rectangular bounding box to deselect everything. Now click close to, but not on, one of the letters and you should see that the rectangular background is selected. Just press the Delete key on your keyboard to remove it.

That leaves all of the individual letters, however, if any of your letters contain more than one element, you will need to group these together. All of our letters contain more than one element, so we had to group all of them. This is done by clicking and dragging a selection marquee that encompasses all the different parts of a letter and then going to Object > Group.

You will now be left with all of your individual letters and next, we'll use these to create the individual SVG files that we need to create a font on fontastic.me.

Related: You might also want to learn to use Live Trace in Illustrator.

Save Individual Letters as SVG Files

Save Individual Letters as SVG Files

Ian Pullen

Unfortunately, Illustrator doesn't allow you to save multiple artboards to individual SVG files, so each letter has to be manually saved as a separate SVG file.

Firstly, select and drag all of the letters so that they don't overlay the artboard. Then drag the first letter onto the artboard and re-size it to fill the artboard by dragging one of the corner drag handles. Hold down the Shift key while you do this to maintain the same proportions.

When done, go to File > Save As and in the dialog, change the Format drop down to SVG (svg), give the file a meaningful name and click Save. You can now delete that letter and place and re-size the next one on the artboard. Again do Save As and continue until you have saved all of your letters.

Finally, before continuing, save a blank artboard so that you can use this as a space character. You may also wish to consider saving punctuation marks and lower case versions of your letters, but we've not bothered for this tutorial.

With these separate SVG letter files ready, you can take the next step to create your font by uploading them to fontastic.me. Please take a look at this article to see how to use fontastic.me to finish your font: Create a Font Using Fontastic.me.

Use the New Asset Export Panel

Image shows traced letters and Letter A in the Asset Export panel.

Ian Pullen

The current version of Adobe Illustrator contains a new panel that allows you to put all of your drawings on one artboard and output them as individual SVG documents. here's how:

  1. Select Window > Asset Export to open the Asset Export panel.
  2. Select one or all of your letters and drag them into the panel. They will all appear as individual items.
  3. Double-click the name of the object in the panel and rename it. Do this for all of the items in the panel.
  4. Select the items to export and select SVG from the Format pop down.
  5. Click Export.