Bunny Fonts: The font platform I've been waiting for

Right since I first started tinkering with websites, I found trying to pick out nice web fonts was quite challenging if you wanted to avoid using Google Fonts. I tried a few services, but ended up downloading the fonts and bundling them in with my website.

This isn't a massive deal, but it has two main downsides: it bloats the git repository;¹ and takes its toll on webpage loading speeds.

Considering how minimal this site is, the latter of those two isn't really a biggy. But swapping out my self-hosted fonts for Bunny's hosted fonts has reduced the uncompressed size of this site from 160KB down to 60KB.

And, while the fonts I was serving myself were of course being distributed via a CDN, a public font-library CDN will always be more performant: with much more traffic, font assets are more likely to be cached closer to end users.

• There are over 1600 font families to choose from!
• Bunny Fonts has been intentionally designed as a drop-in replacement for Google Fonts, so adoption is super quick and simple
• They claim that no personal data/logs are stored, requests are fully anonymised, so it's a much better option from a privacy point of view
• Bunny's CDN is one of the quickest out there,² so there should definitely be no performance drop if you move over from Google Fonts. If anything, there may be performance improvements!

Final thing to clarify is that there is no account required to use this service. I think this is the only unpaid service offered by bunny.net. Usually I'm wary of 'free' services, but I like that Bunny have offered this! Given that CDNs are their primary service, it makes sense that they just piggy-back a (hopefully) privacy-respecting font library on top of this.

I write all my CSS in SASS, and create font stack variables. For example:

_fonts.scss

$fontStackRegular: "<font_name>", serif;
$fontStackBold: "font_name", serif;

style.scss

@import "fonts";
body {
    font-family: $fontStackRegular;
}

This made switching over from self-hosted to bunny's fonts super quick and easy: I added the @import url() that Bunny Fonts provided once I'd finished selecting. For now, I've left the @font-face declarations that point to my unused self-hosted fonts in place,³ but use the new font names in the stack variable, so the change bubbles down to every CSS block when SASS does its transpiling magic.

The end result was as follows:

@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400|karla:400,800);

$fontStackRegular: "Karla", serif;
$fontStackBold: "Karla", serif;
$fontStackMono: "JetBrains Mono", monospace;

So that was +1 line, with two font name changes. And that was it! See the change in the codebase yourself.

The result of all of this is: When the CSS file is loaded by the browser, it sends a request to Bunny Fonts (hitting that URL in the @import url() above), which responds with a payload of @font-face blocks for each requested font with all the varieties (weight, unicode library for language specific versions, etc). Each block contains the dedicated URL for that particular font resource, which the browser then requests.

This all happens in under 100ms. There will be ways to optimise this (?). But, as it is, it's much quicker than the self-hosted stuff I have used until now.

If you like nice fonts and typography, but hate being forced to accept google's ever-looming presence, this is worth a look at. Is it perfect? Probably not! I am not a "power" user. But so far, there's nothing not to like: it's fast, it's easy to use and it's powered by a small but good quality provider. We need more of these sorts of alternatives in our web.