Local font hosting

I’ve been doing a lot of reading and testing, and come to the conclusion—and understanding—that locally hosted fonts are still best for performance. Current browser tech and HTTP2 has rendered the benefits to using a CDN pretty much obsolete. Since weblog can already use external CSS files, is it possible to add self hosting of web fonts?

Even with optimized Bunny settings, I was never able to achieve 100% on lighthouse. Meanwhile my current site with self hosted fonts does.

1 Like

Man, I cannot wait until I start to get the infrastructure for web1.land up and running — omg.lol and weblog.lol will then be able to tap into a proper hosting setup, vs. the cramped database-driven world we live in currently. Posts like yours make me excited to get there, but also a little sad and frustrated that it’s taking me so long. I, too, want to 100% Lighthouse all the things!

But, all that aside, there is a way to juggle this into existence within today’s existing weblog.lol setup, though I’ll be the first to admit that it’s super awkward. But it works!

Here’s what you can do:

  1. Take whatever file you want to host and base64-encode it. You can use the command line or a tool like https://www.base64encode.org (there’s a file upload thingie at the bottom of the page, assuming you don’t mind uploading files to strangers on the internet).
  2. On your weblog, create a new entry with metadata like this:
---
Date: 2024-01-10 01:11
Type: File
Title: gosh.woff2
Location: /gosh.woff2
Content-type: font/woff2
Encoding: base64
---
  1. Below the metadata (leaving the required blank row first), paste in your base64-encoded data.

And that’s it! The brand new thing in the metdata above is the Encoding: base64 bit, which tells the weblog engine that this content is base64-encoded and should be decoded when served. I added that feature just now for this specific use case. (If you actually wanted to serve base64-encoded stuff, then you’d just omit the Encoded metadata line entirely.)

As long as your data is base64-encoded and you’re using the correct Content-type in the file metadata, weblog.lol will happily serve up your file, decoded and in the right binary format. It’ll feel just like a regular old file, even though it’s really a base64-encoded blob in a database. (Yeah, I know, I’m shuddering at the thought of this as well.)

The demo I whipped up and linked above (end of the 2nd paragraph) scores a 99 for performance on Lighthouse, which obviously isn’t 100, but it’s not bad for something I tossed together in a couple of minutes.

With web1.land’s hosting back-end and weblog.lol turning into a static site generator, I think we’re going to be heading to a place where we can make Lighthouse cheer proudly at everything we’re building, all day long. I can’t wait to get there, but until then, I hope this weird little stop-gap solution helps!

7 Likes

Holy shit, this is some digital wizardry at work. Well done, sir.

:eyes: :eyes: :eyes:

1 Like