Create a custom font with only the glyphs you need

Introduction

We shall be using the Open Source package FontForge to extract only the glyphs we need from a pre-existing font. Then we’ll add these to a new custom font and save it in the format we need in five easy steps.

This is an excellent way of being Web Performant aware and only using the bare minimum when it comes to assets.

The five required steps

Step 1. Download the Open Source package FontForge

Head over to the FontForge Project Homepage and select the version you need to work with (available for Windows, Mac and GNU+Linux but this tutorial centres on Apple Mac.)

Step 2. Open the font file you’d like to work with

Upon activating the FontForge application you’ll be prompted to select a font file. Navigate to the individual file you’d like to work with and select it. You’ll see the layout of the font (See Image 1.)

Step 3. Create a new font file

Click on the File menu and select New or use the keyboard shortcut ⌘ + N together (Command-N.)

Step 4. Copy and Paste the Glyphs from the original font into the new font

Select a glyph character you’d like, then copy using ⌘ + C together (Command-C). Taking a note of its position in the original layout (to ensure keyboard mapping is correct) paste your copied glyph into the new font in the same position (See Image 2) using ⌘ + P together (Command-P).

Step 5. Generate your new font, choose name, select location & font format

I’ll break this down into smaller steps as there are some details that need attention.

• Step 5.1
Click on the File menu and select Generate Fonts… or use the keyboard shortcut ⌘ + ⇧ + G together (Command-Shift-G) to open the Generate Fonts Window (See Image 3.)

• Step 5.2 (All next steps See Image 4)
Select where you would like to save your new font (Desktop is usually a good choice).

• Step 5.3
Choose the name of your font, I’d advise having no whitespaces, swap spaces for dashes, e.g. my-new-font.woff2.

• Step 5.4
Choose your font format. This can be done multiple times if you’d like to supply fallback versions for older browsers. I normally just create one in Web Open Font Format 2.0 (WOFF2.)

• Step 5.4
Click the “Generate” button and that’s it, you now have your new font.

Final thoughts

This was considerably easier to do than I first imagined. I chose a simple font as an example with less characters (glyphs) than normal, even so it should be a relatively simple task to use any font and repeat the process.

FYI, the original font file was 14k, afterwards the custom font was 896 bytes.

You can also check out the Experimental Project Page where I used this technique to extract numbers only to create a neon digital clock.

Article Information

About Dave Barr

Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.

Social Media Links

• Github
• Linkedin
• Mastodon
• Polywork
• Twitter

Read more about Dave