801.796.BROS (2767)
Select Page

elearning fonts

I was once asked by someone inquiring about what I do for a living, “Do you know how to make your own fonts?”

“Erm… No,” was my reply.

“Why not?” he asked.

“I don’t know…”

I decided to create my own font to see what the process would be like. Here’s my journey into the unknown.

I downloaded Birdfont. It’s free, and one of the first I found that seemed like it would get the job done. I would suggest if you find it useful, donate to them! Supporting open source software is always a good idea. I also used Adobe Illustrator (not free, but totally worth it, as you may well know).


The first thing I did was write on a piece of paper “the quick brown fox jumps over the lazy dog” in both lower case and upper case. This one sentence has all 26 letters in the alphabet so I used that so that my letters would be natural. I wanted to do a hand written font as my test.


I scanned that paper and took it into Adobe Illustrator. I then traced over my letters, cleaning up my lettering and while trying to maintain a consistent X height.

Once I had created all my letters, numbers, and various other characters, I copied and pasted each letter into Birdfont.

Using Birdfont

I picked Birdfont, but there are quite a bit of free and paid font creators out there. This one looked friendly, but there may be better ones out there. I would imagine that similar concepts should transfer into the font creator of your choice. I’ll admit that experienced some bugs using Birdfont. So it’s not the perfect choice, but it did get the job done (with a little help elsewhere).

The UI was a little difficult to get used to, first with saving your file somewhere. I couldn’t actually navigate the folder, so I copied and pasted the folder address into the bar and pressed save.

When I copied and pasted the letter O, I ran into a snag.


It brought both the outer part of the O and the inner part of the O as 2 separate shapes. I selected the inner shape and clicked an icon that looks like a reload button. On roll over it says “Create counter from outline”.


I then resized it to fit inside the rectangle.

Protip: Create your font at the size you want in Illustrator first. If you don’t, you may have to resize later. If your letter is not one shape, you have to make sure you select all of it when resizing. The O even though it looks like one shape, it’s actually two. Select the inside, too. If your glyph is too small, click a button that has a double-sided arrow with lines on top and bottom, it will scale the object to be as tall as it needs to be.


I didn’t use too many of the other buttons, but when wanting to change the numerical values, right click on that button and a dialogue box will be below the menu to enter in the numbers.


You will want to create some space for each letter. The spacing is controlled by the left and right guides.  When you start playing with the kerning, you’ll understand why.


Navigate to the Kerning tab by clicking the menu button on the top right. Click “Spacing and Kerning” and then click the “Show Kerning Tab” button.



Start typing stuff like: “Yellow”, “squirrels”, “Fi”, “Woodlands” and “Awful”. These are words that start with Q, T, P, F, with a lowercase letter right after. Type in others as well. As you type, you will see a triangle with numbers below. Click the arrow buttons one way or another to make adjustments.


After you are satisfied, you are ready to export.

Click on the menu button. Click on “Import and Export” and click “Export Settings”.



Type in the File name and File Name Mac.


Click Name and Description and make sure to name the Full Name (Name and Style) and Unique Identifier boxes, too.


These will tell your OS what it’s named.

Go back to the Export Settings, and make sure SVG is selected. When I exported with .ttf and .eot selected, they were actually blank. So I used this program to convert the SVG file it did save correctly as a TTF. You don’t have to save to Dropbox. Just select your file and click “Start Conversion”. There will be a “Download” button to click when the conversion is finished.

Great! You now have your very own font! Why would you want to do this?

My initial run was the alphabet, numbers, and various keyboard symbols.

You can make your own fonts! Total customization. Designing fonts isn’t for the faint of heart, though. I ended up creating a grand total of 103 glyphs to cover everything on the keyboard. Mine was just a test, so it didn’t take long. But if it’s a serious font, it may take some time. It’s an option if your just not finding the “perfect font,” you can create your own instead.

Storyline and beyond.

I could have created a bunch of bullet symbols instead of letters and imported it into Storyline. In Storyline, you can change the bullets in the Bullets and Numbering dialogue box. Go to Home > Bullet button > Bullets and Numbers > Symbol > Go to your font name. Select the character you want to use as bullets. Bam! Character.




But, why limit it to bullets? We could create complete button/icon sets as a font to bring into any program that can embed a font (or into a graphics program for those that can’t). This is big. Rather than reloading the same symbol over and over, you can load a font just once and use the characters in that font to create a more compelling course.


Designing fonts can be fun. You can customize the font to match your client’s need or to create something totally unique. It also can be a repository of symbols and icons. What other uses can you see for creating your own font? This was also a new adventure for me. Do you have other ways you create your own custom fonts? If you have your own methods, please tell us how to make your own fonts in the comments!

Pin It on Pinterest