Create your own Font

Design your own font, for your blog or website.

Create a Web Font from your Handwriting

Hello World!

Jump to the bottom for the good stuff :P

These days, computers and the internet have all but replaced the written letter. Gone are the days that you would sit and pen a note to loved ones, or write a strongly worded letter of complaint.
In fact, it seems that you can live day to day without ever having to put pen to paper.

(Unless you choose to bank with German “Postbank” who are an absolute bunch of fucking Luddites and for whom it is permanently 1985, alas, I digress)

With the digitisation of modern communication, it is much easier to keep in touch with those far away but the message often lacks the personal touch that a handwritten letter can convey. Plus presenting something in your own handwriting is quite unique.

I had the idea to make my own font a few days ago and knew that there would be a service out there to facilitate this.

Once we have the font file it would simply be a case of hosting it then calling it into the document via the CSS, this would mean it shows on all browsers, regardless of the fonts installed on the users machine.

Some short Googling later, I found the great place that allows you to create a font:

Simply print out the form, scan it in, and upload it.

Some points to bear in mind are that the file must be a JPG or PNG and must not exceed 2MB in size.
Many modern scanners can output the scanned file as a PDF, if this happens you will need to convert it to an accepted image format.

This was a problem I faced, a quick work around was to download GIMP for windows which allows you to import the PDF file and export it as a PNG image, be sure to save it as a high resolution image for the best quality.

Once the image has been exported, you need to ensure it is below 2MB, to do this you can simply open it in MS Paint, reduce the resolution, and save the file again. Repeat this in increments until the file is below the 2MB limit.

Choose to export the font as a .TFF file, run the application and download the output file.

Next we simply need to rename the .TFF file to something memorable, I chose “font.tff”, and upload the .TFF file to the root level of your web server.

Then we need to open the existing CSS file and add the following:

@font-face {
	font-family: handwriting;
	src: url('font.ttf');

First we define the font-family name.
In the given example I have chosen to call it “handwriting”
You will also need to set the “font.tff” to whatever you chose to call the font file.

This CSS segment assigns the font file to a CSS font.

Next we can choose to assign the font to a class, as follows:

	font-family: handwriting;

Once this has been added to the CSS we can then implement the font into our pages.
Wherever the font is required we can simply wrap the text in the following tags

<p class="handwriting"> This text is in our font </p>

The resulting output should look something like the following:

Whilst the handwriting font is unique and to some extent endearing, my sloppy handwriting is perhaps a little hard to read.
Whilst taking notes, I tend to do so all in capitals ;)
Here are a few example sentences that use all the letters of the alphabet:

lowercase: the quick brown fox jumps over the lazy dog


German characters: ü ö ä Ä Ü Ö ß

Punctuation: ! ” £ $ € % * ( ) < > / ?

Overall I am really happy with the way the font turned out and will look to use it in projects in the future!