I’ve been migrating repos from Github to my privately hosted Foregjo server. One of the recent moves was this very blog.

It also meant I could rip out github-pages which pinned me to some gems. Now I feel fully in control of this blog.

I wanted to make it look less Jekyll-default-theme, but I think web sites generally look terrible. So I’ve stuck with the theme but changed the fonts.

This was exciting!

However, the fonts took ages to load. 322 KB of them. Pages look very odd when the font is jumping around so I used font-display: optional, which says “use this fancy font if it’s available immediately”. After “immediately”, the font will not swap to the requested one (even if it’s downloaded now). The next time you load the page, the font will be in memory, and will display fine. This lead to a mish-mash of fonts though.

I discovered that a library, Subfont, can work well with Jekyll. It looks at the built, static website and checks which characters you need. Then, it resets your font files with just the characters you need. If you don’t use the letter ‘d’ in your website, that’s not added to the font. More likely, it’s the euro symbol, or something.

That’s reduced the fonts sizes hugely.

Font Original TTF Subset WOFF2 Reduction
Special Elite regular 147.5 KiB 34.6 KiB 76.5%
Lekton regular 74.5 KiB 11.1 KiB 85.1%
Lekton bold 74.1 KiB 10.2 KiB 86.3%
Lekton italic 26.4 KiB 4.3 KiB 83.6%
Total 322.5 KiB 60.2 KiB 81.3%

So now I’ve switched to font-display: swap, which will trigger a font-flicker as it’s loaded, but it’s so small I’m hoping it downloads before the first paint.

Lekton-Medium

The regular version of Lekton is a little too lightweight for me.

I got GPT to make it bulkier for me (but not as bulky as bold), and I think it did an alright job so far.

You can download this version of the font: Lekton Medium and its license is here. Though, of course, it has nothing to do with the work of the original author, so don’t blame them if it’s super janky.