Making fonts
Last knit: 2023-08-04
Decided to make fonts, and I’m using this post to find out if the fonts can be displayed on the web (the answer is yes.)
So far I have tried two different workflows using ifontmaker and calligraphr. Both approaches work pretty well.
ifontmaker is an ipad app ($7.99). For the price it has some nice features, and it is pretty easy to pencil in all of the character very quickly. It has bezier curves, but the brushes are limited. It is possible to copy in .svg. I liked the kerning feature for letter pairs.
calligraphr is a website providing a template to draw characters. I open the template in procreate or adobe fresco and do the characters there. Then, the template is uploaded to calligraphr.com, which converts the font to .otf or .ttf.
I used https://transfonter.org to convert .ttf to .woff. This should allow the font to be displayed on the web. Let’s find out.
Sidenote: this post is written in R markdown and compiled as a vignette with pkgdown. I add a “web” folder in the vignette folder where I saved the .woff files for the font. These files can be saved to the docs folder if they are declared in the yaml as resource files https://pkgdown.r-lib.org/reference/build_articles.html#external-files.
SQUIGGLIGRAPHY
THIS FONT IS SQUILLIGRAPHY. IT’S AN ALL CAPS FONT, even though it has lowercase letters. MY PLAN FOR THIS FONT WAS TO USE THE CAPITAL LETTERS TO BEGIN PARAGRAPHS.
ABDCEFGHIJKLMNOPQRSTUVWXYZ
My plan for this paragraph is to write the first letter in squiggligraphy, and all of the rest of the letters in the default font for this post. The rest of this text is just filler text to make this paragraph look like a paragraph. It should have enough words for a few sentences. At least a few. Or, more than a few. Enough for a paragraph.
Neat. The capital letters from squiggligraphy were not vertically aligned properly, so I had to adjust them in font forge, an open source font editor. I also used font forge to export as .woff and .woff2 for the web.
To add the the capital letter i’m using a span, choosing h1 class (from bootstrap 5), and a custom class that sets the font family. It’s a bit clunky but it gets the letter capitalized in a custom font.
<span class = "h1 squiggligraphy">N</span>eatMoebius
Moebius is one of my favorite cartoonists, and I love the way the lettering is rendered. So, I made a font heavily inspired by typography in Moebius cartoons. It only does uppercase, but it doesn’t matter if you type in lower or uppercase. There is limited punctuation.
ABDCEFGHIJKLMNOPQRSTUVWXYZ!$,.?