Creating a custom font from my own handwriting

There's something deeply personal about handwriting. In a world dominated by standardized typefaces, I wanted to bring a piece of myself into my digital projects. So I decided to turn my handwriting into a fully functional font—and it was surprisingly easier than I expected.

The tool: Calligraphr

I used Calligraphr, a web-based tool that lets you create custom fonts from your handwriting. The free tier allows you to create fonts with up to 75 characters, which is perfect for basic Latin alphabet usage. If you need special characters, ligatures, or multiple variants, there's a paid tier available.

My setup

Instead of the traditional pen-and-paper approach, I went fully digital:

  • iPad Pro with Apple Pencil
  • Procreate (though any drawing app works)
  • A good amount of patience

The advantage of using an iPad is the precision you get with the Apple Pencil. You can zoom in, undo mistakes, and achieve consistent stroke weights much more easily than with physical paper.

The process

1. Download the template

After signing up on Calligraphr, I navigated to the TEMPLATES section and selected the character sets I needed—"Minimal English" and "Minimal Numbers" for starters. Then I downloaded the template as a PNG file.

2. Fill in the characters

I imported the template into Procreate on my iPad. Using the Apple Pencil, I carefully wrote each character within the designated boxes. The template has helpful guidelines showing where your baseline, x-height, and ascender/descender lines should be.

Pro tips:

  • Use a solid, consistent stroke width
  • Stay within the box boundaries
  • Pay attention to the baseline—consistency here makes or breaks your font
  • Take breaks; rushing leads to inconsistent characters

3. Upload and process

Once I finished all the characters, I exported the template and uploaded it back to Calligraphr. The tool automatically detects and extracts each character using the corner markers on the template.

4. Review and adjust

Calligraphr shows you each extracted character. This is your chance to:

  • Adjust the baseline positioning
  • Tweak the character spacing
  • Remove any artifacts or stray marks

5. Build your font

Hit the Build Font button, and within seconds you have a .ttf file ready to download. The preview feature lets you test your font before downloading.

Using your custom font in a React app

Now for the fun part—actually using your handwriting in a web project. Here's how to integrate your custom font into a React application.

Method 1: Using @font-face in CSS

First, place your font files in your project's public folder or a dedicated fonts directory:

src/
  fonts/
    MyHandwriting.ttf
    MyHandwriting.woff2

Then define the font face in your CSS:

/* src/styles/fonts.css */
@font-face {
  font-family: 'MyHandwriting';
  src:
    url('../fonts/MyHandwriting.woff2') format('woff2'),
    url('../fonts/MyHandwriting.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Import the CSS in your app and use the font:

// src/App.tsx
import './styles/fonts.css'

function App() {
  return (
    <h1 style={{ fontFamily: 'MyHandwriting, cursive' }}>
      Hello, this is my handwriting!
    </h1>
  )
}

Method 2: Using Next.js local fonts

If you're using Next.js (like this site), you can use the built-in font optimization:

// src/app/layout.tsx
import localFont from 'next/font/local'

const myHandwriting = localFont({
  src: './fonts/MyHandwriting.ttf',
  variable: '--font-handwriting',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myHandwriting.variable}>
      <body>{children}</body>
    </html>
  )
}

Then use it in your Tailwind config or CSS:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        handwriting: ['var(--font-handwriting)', 'cursive'],
      },
    },
  },
}

And in your components:

<p className="font-handwriting">This text uses my custom handwriting font!</p>

Method 3: Using styled-components

If you prefer CSS-in-JS:

import styled, { createGlobalStyle } from 'styled-components'
import MyHandwritingFont from './fonts/MyHandwriting.ttf'

const FontStyles = createGlobalStyle`
  @font-face {
    font-family: 'MyHandwriting';
    src: url(${MyHandwritingFont}) format('truetype');
    font-weight: normal;
    font-style: normal;
  }
`

const HandwrittenText = styled.p`
  font-family: 'MyHandwriting', cursive;
  font-size: 1.5rem;
`

function App() {
  return (
    <>
      <FontStyles />
      <HandwrittenText>Written in my own hand!</HandwrittenText>
    </>
  )
}

Font format considerations

Calligraphr exports .ttf files by default. For better web performance, consider converting to .woff2:

# Using fonttools (pip install fonttools brotli)
fonttools ttLib -o MyHandwriting.woff2 MyHandwriting.ttf

Or use an online converter like CloudConvert.

The result

Having my handwriting as a font adds a personal touch to signatures, headers, or anywhere I want that human element. It's a small detail, but it makes digital content feel more authentic and connected to who I am.

The whole process took about 2-3 hours, most of which was carefully writing each character. If you have an iPad and Apple Pencil, I highly recommend giving it a try. There's something magical about seeing your own handwriting rendered as a web font.

Resources