Flaunt Your Font Want

 

Last night, my wife and I rewatched Jurassic Park, later that night I drifted into a blissful slumber.  My unconscious mind wandered vastly into the future where a futuristic archaeologist chipping away an amber-encased USB device, having been perfectly preserved for 3000 years.  The contents, all my life's work; software projects, audio, video and including a copy of this blog post.  The archaeologist releasing the USB device from it's amber container goes deep into the cellar of cellars to retrieve a primitive device capable of reading this archaic media.  Amazingly, all my life's work comes to life once again, a group of interested historians eagerly scan the work only to soon show disappointment.  "Arial?  A dull, Arial font?  Clearly this work is of no substance." as they close the computer, remove the USB device and promptly toss it into the nearest waste basket.  A record of my life for the 'after people' only to be discarded like common trash do to lack of creativity in the font game.  No, no I say, we'll step up our font game now and forever for myself, for you as well as for the after people.

I've never really had much of a need for non-system fonts.  Most user interfaces I've developed were for engineers who cared little for cosmetics, have yet to ever work with a Ux designer nor a graphics designer in any amount of detail.  The default system fonts as a result have always been 'good enough' as a result.  In fact, font files have always been a mystery to me, never spending any time thinking about them at all.

But not today, today we're gonna spend a little time understanding what they are and if you're like me you may even be surprised.  After decades of not caring about fonts, why today?  Why now?  Whelp, as I've been creating images and video content it becomes valuable to provide some form of text overlay.  I've always used the system fonts, but suppose you are tweaking a military-style video you'd likely want to add a military-style font.  That opens the door to understanding where to find and install custom fonts to suit all your creative needs.

 

vs.

So the remainder of this post will touch on how to download and use custom fonts in images, but they can easily be used in video, slideshows,....

For years, font files were simply 'magic', but let's look at one briefly.  Smarter folks may already know this, but a font ttf file can be viewed as an image; behold, FreeeSerif.ttf

$ display /usr/share/fonts/truetype/freefont/FreeSerif.ttf

The image shows the alphabet, numerics and special characters.  It then demonstrates a variety of the fonts at differing font sizes.  This can give you a feeling as to whether the font strums your creative chord.

So, where does our search begin when seeking the elusive font?  Here is a good start, and the source we'll be using in the rest of the post: www.1001freefonts.com

Assuming that we will download, extract and install the fonts to a local directory, the process takes the form:

$ wget -P TEMP https://www.1001freefonts.com/d/4018/eraser-dust.zip

$ cd TEMP; 

$ unzip -o eraser-dust.zip; 

$ mv EraserDust.ttf ../EraserDust.ttf

$ rm -rf TEMP;

The result, a brand new shiny EraserDust.ttf font file just waiting for us to use.

Using ImageMagick, we can create an image using the new font with some meaningful text:

$ convert -background None -fill white -font ./EraserDust.ttf -pointsize 96 label:"EraserDust.ttf"  -rotate -15 foo.png

$ display foo.png

Now, you can make your own thumbnails, augment video, update documents with your newly acquired custom font.  Imagine how much more fun your engineering documentation can be using a whimsical font style :thumbsup

With our new found powers, let's download and install a series of fonts, use Imagemagick to create an image showcasing the new font, then slap them all into a video displaying each font for 1 second.  I find a makefile suites this purpose pretty well, the chained commands for the video mp4 target is a bit clumsy as a series of shell commands, but it's good enough to convey the steps.

$ cat -n Makefile 

     1 all: background.png video.mp4

     2

     3 video.mp4: FridayStroke.otf TopSecret.ttf BostonTraffic.ttf Camouflage.ttf DrippingMarker.ttf EraserDust.ttf SnackerComic.ttf

     4 ${SH} i=0; for f in `echo $^`; do \

     5 echo $$i; \

     6 echo $$f; convert -background None -fill white -font ./$$f -pointsize 96 label:"$$f"  -rotate -15 overlay.png; \

     7 composite -gravity center overlay.png background.png frame-$$i.png ; \

     8 i=$$((i+1)); \

     9 done

    10 ${SH} ffmpeg -r 1 -i frame-%d.png $@

    11

    12 background.webp:

    13 ${SH} wget -O $@ https://i.vimeocdn.com/video/521265093.webp?mw=1000

    14

    15 background.png: background.webp

    16 ${SH} ffmpeg -i $< -vframes 1 $@

    17

    18 SnackerComic.ttf:

    19 ${SH} wget https://www.1001freefonts.com/d/4631/snacker-comic.zip -P TEMP

    20 ${SH} cd TEMP; unzip -o *.zip; mv *.ttf ../$@

    21 ${RM} -rf TEMP

    22

    23 FridayStroke.otf:

    24 ${SH} wget https://www.1001freefonts.com/d/26677/the-friday-stroke.zip -P TEMP

    25 ${SH} cd TEMP; unzip -o the-friday-stroke.zip; mv The\ Friday\ Stroke\ Font\ by\ 7NTypes.otf ../$@

    26 ${RM} -rf TEMP

    27

    28 TopSecret.ttf:

    29 ${SH} wget https://www.1001freefonts.com/d/7052/top-secret.zip -P TEMP

    30 ${SH} cd TEMP; unzip -o top-secret.zip; mv Top\ Secret.ttf ../$@

    31 ${RM} -rf TEMP

    32

    33 BostonTraffic.ttf:

    34 ${SH} wget https://www.1001freefonts.com/d/3269/boston-traffic.zip -P TEMP

    35 ${SH} cd TEMP; unzip -o boston-traffic.zip; mv boston.ttf ../$@

    36 ${RM} -rf TEMP

    37

    38 Camouflage.ttf:

    39 ${SH} wget https://www.1001freefonts.com/d/12584/camouflage.zip -P TEMP

    40 ${SH} cd TEMP; unzip -o camouflage.zip; mv CamouflageW.ttf ../$@

    41 ${RM} -rf TEMP

    42

    43 DrippingMarker.ttf:

    44 ${SH} wget https://www.1001freefonts.com/d/14693/a-dripping-marker.zip -P TEMP

    45 ${SH} cd TEMP; unzip -o a-dripping-marker.zip; mv adrip1.ttf ../$@

    46 ${RM} -rf TEMP

    47

    48 EraserDust.ttf:

    49 ${SH} wget -P TEMP https://www.1001freefonts.com/d/4018/eraser-dust.zip

    50 ${SH} cd TEMP; unzip -o eraser-dust.zip; mv EraserDust.ttf ../$@

    51 ${RM} -rf TEMP

    52

    53 clean:

    54 ${RM} *.otf *.ttf *.png *.mp4 *.webp

    55

Lines 18-51 has a series of font targets, each downloading the font, extracting it in a disposable directory, moving the TTF file, then cleaning up.  

Lines 3-10 do the meat of the work, first defining each font file as a dependency (the make engine satisfying the dependency by executing the necessary recipe), then create a transparent overlay with the font name, slapping that over a background image and repeating for font.  

Finally, line 10 converts the images into a video slide show, 1 second per slide.

Now your amber-encased creative works will have some flair.