How to Create Custom Font

I love typography and layout. Those are two main reasons why I start learning graphic design in the first place, but the fact that I’m more of a ‘drawing’ than ‘designing’ person sets me away from my starting point. A while ago, I have typography itch that needs scratching, so I decided to learn creating a custom font.

Display typefaces are my favorite and I think it’s a good place to start. I decided to create a basic and simple font so I can study the glyph structures. Since this is my first experience, I thought it would be nice to share the process as personal note — in case I’m missing something in the future. Let’s have some fun.

Tools for creating custom font

I’m using two apps for this project, a vector editing app and a font editing app.

Vector editing app

I usually use Inkscape for my vector works, but this time I’m using Graphic (iDraw). Graphic has quick access to change the grid size and convenient snapping options that helps my workflow, this is handy for this kind of project.

Font editing app

I’m using FontForge an open source, and cross platform app for creating and editing font. FontForge can be downloaded for free from their official site.

Creating custom font process

1. Base shape

I construct the glyph by using rectangles and create them in H, A, M, B, U, R, G, E, F, O, N, T, S order. I spread all glyph in a 1000x1000px canvas so I can get an overall look of how the glyph standing next to each others.

Constructing font’s base shape.

2. Defining the font shape

Once I’m happy with the base construction, I continue to modify the glyphs by adding small shapes and curves to define the font’s final shape. I keep the base construction and detail shapes as separate objects, because it’s easier for me to experiment with different possibilities.

Modifying glyph by using various shapes.

I create the rest of the glyph based on the HAMBURGEFONTS final shape. This process is the most fun yet challenging for me, as I need to implement the defined shape to the rest of the glyph so that they remain consistent.

Final shape of all glyph.

3. Exporting custom font shape

When all glyph are done, I create a new 1000x1000px file and add horizontal guide at 800px. I resize each glyph height to 800px and align it to top and left side of canvas.

Glyph resizing guide 1). Ascender 2). Baseline 3). Descender

I’m using those method for all glyph except letter ‘Q’ because it has descender. FontForge will detect (0,0) coordinate as ascender, (0,800) as baseline, and (0,1000) as descender when importing SVG file.

Glyph resizing guide for letter ‘Q’

4. Importing SVG to FontForge

Before importing SVG it’s best to decide wether the font will be in OTF or TTF format. If it’s an OTF, set the Em Size in Element > Font Info > General to 1000. If it’s a TTF, set the Em Size to 2048 to avoid error when generating font.

Setting Em Size before importing the SVG files.

Also set font name, copyright info, and other details in PS Names menu after setting the Em Size.

Setting font name and other details in PS Names menu.

To import a file, simply click a glyph box and open File > Import and choose the corresponding SVG glyph file. This process needs to be repeated for all glyph.

Importing SVG files into FontForge.

5. Adjusting the custom font

After importing all glyph, I adjust the horizontal size of the font by using metrics window. Metrics window can be accessed through Metrics > New Metrics Window. I type an example string then set the glyph width by adjusting RBearing.

Adjusting font horizontal size using RBearing.

6. Generating font

I generate the font by clicking File > Generate Fonts. I encounter errors when I’m trying to generate my font, most of them are the ‘Non-Integral Coordinates’ type of error. These problems can be fixed by clicking the highlighted problem in validation window. It will take you directly to the problem, click the fix button when prompted.

After fixing all the errors, it will pass the validation, and the font will be generated. Finally, I install the font and test it on various apps to make sure it’s working.

I read somewhere that the coordinate error occur because TTF coordinate must be on integral coordinate, and it will not occur when generating OTF. Maybe I’ll try to use Element > Round > To Int option in the future and see how it works.

I really enjoy my first custom font creation experience and I hope I can improve this skill. You can download the font to test it out, feedback and suggestions are appreciated. Feel free to let me know if you want to share your custom font creation method and process.

Font can be downloaded here. It’s free to use for personal or commercial projects. Have fun!

Please consider to buy me a coffee if you enjoy my post. Thank you.