self-hosting fonts with raspberry pi

24.07.2023

3 min read

OK, so maybe this isn’t the most convenient or practical thing in the world. But it’s maybe worth doing.

This was the article I read that inspired me to minimize third-party dependencies. You might also be interested in reading this. Prior, I hadn’t even known that self-hosting Google Fonts was a thing. And if I was going to host Google Fonts, I might as well host Font Awesome fonts myself too.

I decided to try and do this with my RPi 3b+. It seemed like a good use for it - they’re supposed to make pretty good lightweight servers. I’d heard good things about DietPi, so I opted to install that.

DietPi Installation

Installation was relatively straightforward. You need the DietPi image, some software to flash it (I used Balena Etcher), and an SD card. After that’s done, you can edit dietpi.txt to configure your OS install so that it doesn’t require any manual input from start to finish. I knew I probably needed docker and docker compose, so I added these lines in my dietpi.txt:

AUTO_SETUP_INSTALL_SOFTWARE_ID=134 # the ID for docker compose
AUTO_SETUP_INSTALL_SOFTWARE_ID=162 # docker

Plug all the cables in, and everything installs itself. Installation took approx. 35 minutes - upon completion, we just needed to get our server up and running.

Serving the files

We’ll use nginx to serve up the files:

version: "3.8"

services:
  nginx:
    image: nginx:latest
    ports:
      - "32080:80"
    volumes:
      - ./data:/usr/share/nginx/html
      - ./custom-nginx.conf:/etc/nginx/conf.d/default.conf # custom-nginx.conf to enable file browsing

custom-nginx.conf, in the same directory:

server {
    location / {
        autoindex on;
        alias /usr/share/nginx/html/;
    }
}

Might need to enable some CORS stuff too: more

After I got that up:

Set-up my reverse proxy
Move stuff to the RPi:
- scp -r /path/to/localdir user@remote:path/to/remote
Try to access my files at https://files.example.com/example/font.woff2

And it worked! 🙂 We’re one step closer to our self-hosted fonts.

Self-hosting the fonts

Now we had to get our fonts set up. For this, I’m using the helper at google-webfonts-helper.

Choose the font you want
Select charsets and styles
It will give you some code like this:

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Monomaniac One";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/monomaniac-one-v9-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Copy the generated code into your .css files
- Make sure you change the src: url("...") line to wherever your fonts are hosted

That should be it, really.

I checked performance - when importing Google Fonts via their service, we needed to load 311 kilobytes worth of resources. When self-hosting, this went down to 253 kilobytes. Not huge, but it’s something.

Did the same for Font Awesome and changed the sources. Instead of loading a .js file (which I was doing previously), I loaded the CSS from all.min.css. I also did this for some scripts I was pulling from a CDN.

It took about… 3 hours in total. But a lot of that time was spent to figuring out the details. I am (cautiously) optimistic that it will take a shorter time in the future, now that everything’s set-up.

References