Creating a CDN for your favourite font files

02 May, 2024

So, the other day at work we had to import custom fonts into a no-code platform that does not allow custom fonts. Typical !

What the platform did allow was adding a custom tag. So, we were not entirely hand-cuffed. But that means we would have to write our own CDN as somehow loading fonts from usual dropbox or storage does not work due to the way url() CSS imports a font.

We tried the hacky, encode fonts in base 64 approach. That did work but then some browsers were blocking or not reading it properly. We could not figure out why. Most of us are generalists and the place is a consultancy, so no time to think and ponder on the festivities the spring brings, weather the pluck a flower or not, the direction the wind blows, you know !

Cloudfare was an option, but cursory search proved that we will have to do a bit of work to make it work. Chat GPT-4 ultra pro max was not very helpful too.

So, we googled the hell out of the problem and found a solution : BunnyCDN.

I know there are probably better options, more sophisticated options, and maybe performant options available, but as Cult of Done says : Accept that everything is a draft. It helps to get it done.

How to make a fast font-CDN using Bunny CDN

1. Make a storage area

2. Create a CDN/Pull Zone

3. Map that storage area to a CDN/Pull Zone and configure things like caches, purging, blocking etc.

3. Copy the URLs

4. Use it on that no-code/low-code/full of code website to serve fantastic fonts every time. This is especially useful if you are the one who made those fonts ;)

<link rel="preconnect" href="https://fontdeliveryblahblah.b-cdn.net">
<style>
@font-face { 
  font-family: "BlahBlahGrotesk";
  font-weight: 400;
  font-style: normal;
  src: url('https://fontdeliveryblahblah.b-cdn.net/BlahBlahGrotesk-Regular.woff2') format('woff2');
}
</style>

If you guess the city in the first picture on this post, you get this on a postcard sent to you.

Hope this helps someone!

Cheers, Rohit