How to Create a Font Using Fontself and FontForge

If you're a designer or illustrator who's more comfortable creating glyphs in Adobe Illustrator, this tutorial is right up your alley! This tutorial is part two of two. Check out part one if you haven't already! We've planned out our letter set, gone over ways to refine the font design, and prepared files for use in a font-making program, all from the comfort ofAdobe Illustrator.

In this tutorial we'll explore two fantastic methods of creating a custom font with our vector letterforms. The first will useFontself, a paidAdobe Illustratorextension, and the second will use FontForge, an open-source font-creation program.

This tutorial should easily prepare you to create simple and fun fonts that can be sold as digital assets onEnvato Market. Check out the market'sfont categoryfor inspiration for your personal designs.

1. Install the Script

Step 1

If you're working withFontself, you'll need to install the script. Once you've purchased and downloaded it, you'll find a zip folder with instructions for installation. My instructions involved going toFile > Script > Other Scripts in order to load the script. Once you see the message below, restartAdobe Illustrator and your extension will have been installed.

Step 2

UnderWindows > Extensions, you'll be able to open theFontself Maker panel. This panel allows us to create a simple font without leavingAdobe Illustrator.

2. Define Your Glyph Set

Step 1

Since we've already prepared our character set in the previous tutorial, you can simply open yourAdobe Illustrator document that has your original vector objects if it's not open already, and we can begin adding glyphs to our font.

Simply select each object, type the letter or character you want it to represent, and hitCreate Glyph in theFontself Maker panel.

Step 2

One by one, add all of your glyphs to your font. For characters that have more than one object, make sure they'reGrouped (Control-G) together so they remain a part of the glyph. Notice in the image below how without my selected lowercase j being grouped, it was missing its dot.

Step 3

You can check out your font in action in theLive Preview section of theFontself Maker panel. Right below this preview are two buttons that control the spacing between letters. Play around with this spacing as you see fit. Will your letters butt against each other or have a large amount of space around each character? It's entirely up to you. Below are two examples of spacing within the font I made.

Step 4

But wait, there's more! All of my glyphs are currently floating above the baseline. While that works for most of them, characters with descenders, like lowercase j, g, y, p, and q, can all be dragged below the baseline manually within the panel. You can also move around any letterform or punctuation character as you see fit.

3. Save Your New Font

Step 1

When you're satisfied with your font, hitExport in theFontself Maker panel, give it a unique name, and hitOK.

Step 2

Navigate to your saved font file andInstall it on your machine.

Step 3

Test your new font out within your document inAdobe Illustrator. If there are portions of the font that you don't like, you can edit characters, delete or replace them in theFont Maker panel, save over the font file, and reinstall the font itself.

Have fun with your creation and experiment with characters and spacing.

4. Import Characters Into FontForge

Step 1

If you'd like an open-source alternative or more control over your font creation, you may wish to import your characters intoFontForge. Open the program and hitNew in order to create a new font.

Step 2

Double-click on one of the glyphs and a new window will open where you can import, draw, or edit vector characters.

Step 3

Go toFile > Import and navigate to yourSVGfiles created in the first part of this tutorial set and import the corresponding glyph.

Step 4

As you edit your character, be mindful of the lines that denote width (boundaries marked one and two below), the baseline, cap height, and descender line.

Step 5

Aside from moving the bars that denote width, I'll also be making sure that the bottom of characters like lowercase y, as seen below, hang below the baseline.

Step 6

Open each glyph, import each of yourSVG files in turn, and edit the boundaries of your character as needed until your entire font set is ready to go.FontForge allows you to create and upload all of the characters on your keyboard as well as special characters, so you can create large and even complex font sets as you see fit.

5.Save Your New Font

Step 1

Before you export your font file, you'll want to input some file information. Go toElement > Font Info (Control- Shift-F) to enter your unique font and font family names as well as copyright information.

Step 2

When you're satisfied with your font, go toFile > Generate Fonts in order to save your font as aTTF file (or the font file extension of your choice). Navigate to your saved font file, install it, and use it as you would any other.

Great Job, You're Really Done This Time!

Now you have two simplified ways of creating custom fonts! Share your creations in the comment section below, or consider uploading your content to the font section of Envato Market where you can sell your fresh-made font. If you like the font I've created, you can purchase Marker Doodles from GraphicRiver.