Improve loading times by subsetting fonts¶

TL;DR¶

By including only certain code points from existing fonts, you can reduce the transferred data for your website. If you only want the commands / examples, go to Guide: Subsetting Fonts with Python.

Quick Background¶

I use the Ficurinia Theme for my Hugo-generated blog. It uses Nerd Fonts for little icons like calendars or social media logos. However, the font file has an uncompressed size of ~375 KB, even though the website uses only ~10 icons. After subsetting, the font file size is reduced to ~1.4 KB, less than 0.5% of the original size!

Guide: Subsetting Fonts with Python¶

For subsetting your own (local) fonts, there is a great blog article by Markos Konstantopoulos. It delves into deep details about different filetypes, importing them into CSS, and font features. However, the article is a bit long, so here's a short version for selecting certain icons from your icon font files.

First, install the required dependencies:

pip install fonttools brotli zopfli

Then, identify the code points of the icons you want to use. For example, if you use Nerd Fonts, you can go to the Cheat Sheet, look for a symbol you want to use and copy the hexadecimal number in the bottom right corner. In the picture on the right, you can see that the GitHub icon has the code point F09B.

After you've collected the code point for your symbols, run the following shell script with your code points. Please note that you have to add a U+ to your code points, e.g. U+F09B for the GitHub logo.

#!/bin/bash
pyftsubset \
  original_font.woff2 \
  --output-file="subset_font.woff2" \
  --flavor=woff2 \
  --unicodes="U+F09E,U+F09B,U+F0E1,U+F5EC,U+F553,U+F002,U+F02B"

Finally, you can include the subset_font.woff2 file into your web project.