Install a custom font into a Netlify Docker Container

This weekend I’ve been implementing automatically generated opengraph images for blog posts as a quick experiment for a side project I’ve been planning. There are number of methods to achieve this, Bernard Nijenhuis’ Eleventy only solution is really neat^[1]. I’ve followed that implementation (related commit) and it’s working really nicely^[2].

The issue is that my modifications (and design for the social graphic) relies on having a custom font install at build time. That’s not something that Netlify has in place.

So… how do you get around this minor issue? You install the font.

Netlify spins up a Docker container to run your build, this means that you can run a bash script in the container:

#!/bin/sh

# Make a local font folder
mkdir ~/.local/share/fonts

# Copy the font from the repo to the right place
cp src/_assets/fonts/space400.ttf ~/.local/share/fonts/space400.ttf

# Reload the font cache
fc-cache -f -v

Then, in package.json file for the script that Netlify runs we can trigger that bash script to be run before anything else (such as the 11ty build) kicks off.

  "scripts": {
    "dev": "ELEVENTY_ENV=development eleventy --serve --incremental & mix watch",
    "netlify": "bash utils/fontInstall.sh && ELEVENTY_ENV=production eleventy && mix --production"
  },

Magically the custom font is installed and is now available for any requirements you have later on, like generating a whole bunch of social media graphics.

The tweaks to make this work are all in a commit for reference. Many thanks to Bernard for open sourcing his 11ty site.