How To Make Your Own Custom Font

Ever looked at a font and thought, 'I could do better'? Well, now you can!

Introduction

I have a confession - I love fonts.

I've been a 'hobbyist' graphic designer most of my life - I wouldn't say I'm good, just technically competent.

For example, in college I got stuck designing all the T-shirt designs for my fraternity. While fun, this was a huge challenge as there were a lot of design constraints for shirts, people could be quite picky about shirts, and most importantly, there were A LOT of shirts to design.

Like most (amateur) designers, I learned to rely HEAVILY on fonts. To the point that I can - at sight - recognize most fonts you'd see in Google Docs or Word or whatever.

One thing that never occurred to me until recently is that I could create my own custom font! Admittedly, I saw this in an Instagram Reel and was instantly intrigued.

If you're on my site reading this, you know where this ended up, but stick around - I'll show you how easy and rewarding it is to create your own font(s).

Might I add as well - FREE to try, you'll likely have to pay a little if you want to use this 'in the real world' though.

---

Creating Your Own Font

The process is surprisingly straightforward using Calligraphr. Here's how I did it:

1. Download the template from Calligraphr

   • If you're reading this, I'd recommend the "English Minimal" template which is around ~60 characters.

   • If you're logged in you can access that here.

2. Draw your font characters on your PDF template

   • I did this on my iPad; however, you can print it out and draw on it with a pen (yes, a physical pen).

3. Do your best!

You don't have to use Calligraphr to create your own font, but it's a great tool and I'd recommend it. I saw some alternatives as well but this seemed the best built and reasonably priced.

---

Some Tips

Some quick tips about making your font a bit cleaner (it took me a few iterations personally):

• What do the lines mean?

  • This was actually pretty tricky to get my letters all aligned properly.

  • Some pointers:

    • The "baseline" determines where your letters "sit."

    • The "x-height line" guides the height of lowercase letters.

    • The "ascender line" shows how tall letters like 'b' and 'h' should be.

    • The "descender line" indicates how low letters like 'g' and 'y' should go.

• How do I get extra characters?

  • While Calligraphr's basic plan is great for letters and numbers, I opted for their paid plan (just for one month) to include special characters. This allowed me to create:

    • Currency symbols ($, €, £, etc.)

    • Common punctuation marks (., !, ?, etc.)

    • Special characters I knew I'd need (©, ®, etc.)

    • I even included some math characters for fun.

---

Bonus - Implementing in Next.js

My site - and most of my sites - are written in Next.js which has some pretty heavy font optimization built in.

Here's how to add your custom font to a Next.js project:

// font.js/ts

import localFont from 'next/font/local';

export const fontDaniel = localFont({

src: './Daniel-Regular.otf',

variable: '--font-daniel',

});

Then to use it in your project is really on you! Apply it individually to each component or you could go more aggressively like:

body, * {

font-family: var(--font-daniel);

}

I wouldn't exactly recommend doing it like this but however you need to get through the day.

---

My Honest Review

I have to be honest - I'm very mixed on my font. I really love looking at it and it's objectively cool, but at the same time, it's definitely a bit hard to read and FAR from perfect. I look at lots of specific letters with disdain.

It has its quirks and imperfections which bug me a bit; however, other people have really received it positively! Not all feedback was positive for sure, but mostly positive and, maybe more importantly, it's definitely making an impression.

As a font nerd, there's also something deeply satisfying about having my own custom font, even with its imperfections. It adds a personal touch to my site that I think not many other fonts could provide.

---

Conclusion

Creating your own font is a surprisingly accessible and fun project.

The entire process took me just a few hours total (including some iterating), and the results, while not perfect, have added a unique personal touch to my website. As I've said, if nothing else, people definitely notice it.

If you have even a passing interest in typography or design, I highly recommend giving it a try. It's a great way to add a personal touch to your digital presence, and the process itself is quite enjoyable.

I'd love to see what you create! Feel free to share your font experiments with me, or let me know what you think of my custom font!

---

Resources

• Next.js Font Optimization Docs

• Calligraphr

• Font Creation Process Video