Your own handwriting as a font on the website

This entry is really special. As I started to write the weekly blog post today, my MacBook pointed me to a macOS update to install. Since I’ve already clicked "later" the last three times, I figured it wouldn’t take that long and clicked "ok". That was six hours ago and since then I’ve been shown a refresh bar. Since this blog post needs to get done today, I decided to tackle a somewhat unusual topic in an unusual way. Sofasophia told me the other day that she turned her handwriting into a font and now uses that font on her website. I had heard about this before, but never really took it seriously. As I was staring at my progress bar, there was an iPad next to it and I decided to give it a chance. I would create a font and then put it on my blog.

There are several apps for iOS and Android with which you can create a font from your handwriting. I have installed and tried fontise, tinkafont and a few others. The two mentioned are free and you can use them to create your own font on an iOS device. For using the font you have to pay something and it was not possible, or I did not find it, to create True Type fonts for a website.

Calligraphy

The website Calligraphr.com offers exactly what I need and apparently for free … let’s see&

So basically you download a PDF template, print it out, write the letters in the prepared boxes, then scan it, upload it again … and … poof … you have your own font. Actually quite simple if you have a printer and a scanner. But I have "only" an iPad and it was already a problem to write something into the PDF. After a few unsuccessful attempts with the original Adobe Reader and another app I found PDF Pro 3. There you could write something with your finger or the Apple Pencil. The first day after the download is free, after that this feature is probably deactivated. Anyway, it worked.

After filling out the PDF, it can be uploaded to Calligraphr’s website.

The letters are actually converted and now I understand the business model& The first 75 letters are free, afterwards you have to pay something. I think that’s fair, I can try out before if everything works.

After I decided with a heavy heart for 75 letters (digits, lower and upper case and umlauts) I can create the font.

I see my handwriting compared to other fonts and realize that I painted the characters much too small. So let’s do it again.

Now the characters have the right size and I get a .ttf and an .otf Font offered for download.

Set up fonts on the website

Theoretically the thing is quite simple. The font files have to be uploaded to my webhosting and I have to define in the CSS file of my WordPress that I want to use my new font now. Had I said that I use an iPad? Now I could download an FTP app (probably paid) or take the Novatrend website. In the cPanel there is a file manager which works very well. I create a folder font and load the hagen-regular.ttf in there.

On the SelfHTML website about CSS/properties/font-formatting/@font-face is well explained which commands you need to include the font file.

In WordPress I add the appropriate commands in the Customizer and am surprised how well it works (My Blog). The font file is 18kB by the way.

The whole thing looks kind of creepy then, because I can actually identify the font as "my font". Also, I haven’t written longer texts by hand in a very long time. Now this is not a coherent handwriting, but only a block letters font, but with a little effort a real handwriting should also work with this method.

Blog Post writing

What’s left now is to write it all down, take screenshots and post them on the Novatrend blog. The MacBook still showed the scroll bar and I tried all possible forms of rebooting ( [cmd] + V, [cmd] + [Option] + [P] + [R] , and similar). Unfortunately without success so far.

[UPDATE] It was possible to import a backup and meanwhile it works again.

The WordPress App for iOS

So I installed the WordPress app for iOS, connected it to the Novatrend blog and wrote the blog post with it. It worked great and I will do it more often. The WordPress app does not include a Gutenberg editor and works very stable and unobtrusive – I am impressed. screenshots are easy to take on the iPad and can be cropped right away – very handy.