Turn your handwriting into a web font. This is my very own “Olivia” font.

So, you want to create a custom font? Perhaps even turn your handwriting into a font? This blog is for an absolute beginner coder - it does assume you have some basic knowledge of setting up an HTML document and CSS stylesheet. To write your code, I recommend you use something like Visual Studio Code. It’s great and easy to use.

Here’s an overview of what we’ll be doing…

You are going to need to set up a HTML document and CSS file. I’m going to take you through the steps:

First of all create a new HTML document — you can copy and paste the code below… save it as index.html

HTML starter code

We’ll be using a webfont generator called Font Squirrel to to create our webfont. Helpfully, they create a stylesheet.css for you so you don’t have to.
You will also need to set up a main.css file. You can copy and paste the code below… save it as main.css

main.css starter code

• Next thing we’ll do is to create a .ttf file. A True Type Font is a file extension for fonts used by Apple and Microsoft to create a scaleable version of each of your letters without distortion, pixelation or loss of quality. So you can resize your fonts and they will still look great if massive or tiny and will look the same whether printed or on screen.
• After we’ve done that we’ll turn that .ttf file into a webfont

Okay, so hopefully you have set up your index.html document and main.css files? Great… then, let’s get started…

Step one: Get writing

I thought I’d recreate my illegible scrawl as a digital font. So, first of all, I needed to get a handwritten version of each character. To do that go over to calligraphr, and click on the Quick Test button. This will allow you to download a .png file containing an alphabet template for you to fill in.

With that downloaded you need to fill it in. So go over to sketch.io and upload the .png file, pick a ‘pen’ from the ‘brush’ selector and get scribbling. Using a mouse or trackpad to describe the flourishes, ligatures and particularities of your handwriting is perhaps not the most natural way of writing, so you could also print the template and fill it out with a ‘real’ pen. Save your completed PNG (or if you’ve done it by hand on a printed sheet, take a photo / scan it in, and save to your computer).

dexterously manipulating trackpad to render your scrawl

Head back over to calligraphr to upload your completed template.

Once uploaded, click the GENERATE FONT button:

Voila! Download your font. I downloaded both the .ttf and .otf files and saved them in a new folder on my computer. We’ll use this folder for our Webfont, HTML and CSS files too, so name your folder something helpful like myFont.

Step 2: Webfont Generator

To turn your .ttf and .oft files into webfonts you can use a Webfont Generator. I used Font Squirrel . Simply upload your files, agree to the terms of use and then click Download Your Kit button.

You’ll now have all your need in a zipped WebFontKit folder. Double click to unzip this folder and save it to your myFont folder. Great! Now you have your .ttf, .otf files and your webFontKit all in one place.

Step 3: Bringing it all together

If you’ve not yet set up your HTML document do that now, you’ll need some boilerplate code that should look like this…

Great. Now for CSS.

Create a new CSS folder in your myFont folder. Remember your WebFontKit folder? That should also be in your myFont folder.

Go into your WebFontKit folder and move your stylesheet.css file into your newly created css folder. Take a look at your stylesheet.css? You’ll notice that Font Squirrel has created some code, bringing in our webfonts using @font-face. This css rule is the thing that allows us to use our custom font in our design, which is helpful. I’ve added a .ttf format too, which is necessary to ensure your browser can read the custom font.

NB i renamed my fonts with the prefix ‘olivia’ to make them identifiable. You can do the same but make sure you are consistent with your naming conventions.

Okay, leave CSS for the moment and go back to your HTML document. In the <head> section you’ll need to add <link .../> for both the stylesheet.css and main.css files.

Import the CSS main and stylesheet

Great, we’re doing well, and nearly there… We just need to display our font and to do this let’s insert some text in the body of our HTML file.

So I can compare my custom font to the default font, I’ve inserted three <p> tags with relevant text inside a<div>, and given the text I want to customise the class of handwriting. This class name will allow you to refer to the relevant text element in your main.css file and style it with your custom font.

and finally… we just need to link up our custom font in the stylesheet.css to our main.css.

Go over to main.css where you need to declare your handwriting class and make sure the font-family is the very same name (spelling, case size)as it is declared in your stylesheet. My custom font is called olivia so this needs to be the same in both .css files when declaring font-family.

You can also give it a font size. I’ve also given the <body> of my HTML document a font-size: 48px; so the default font text is the same as my custom text. I’ve used flex to centrally position all the text on the page. I won’t go into flex as that is a separate subject that my friends Rhys Handley and Matt Wendzina can tell you all about.

And that is it… just launch your browser and enjoy seeing your ‘inimitable’ scrawl on your screen. Perfect.

well done, you have created a custom font.

Finally… if you want to look at my code or download the exceptional ‘olivia’ font then you are welcome to grab it from myFontPublic GitHub folder

Hope you enjoy creating and using your own custom fonts. Thanks for reading.

If you are stuck on anything. You might find this link to Font Spring helpful. There is a short video on how to import your webfont if you’re stuck. It also provides a helpful check list for importing and adjusting your code.

Here’s an article on CSS styling of @font-face too