Skip to main content

Caching fonts on Netlify

Posted in Development, Performance and Serverless

I’m not sure what took me so long to notice, but FS-Me, the custom font I use on my website wasn’t caching. I wrongly assumed it would be done automatically and didn’t notice the ‘flash of unstyled text’ (known as FOUT) since I have FS-Me installed locally.

FOUT is fine, but it should only happen once. What’s more, a lack of caching means an extra burden on the user who has their data allowance eaten into unnecessarily with every subsequent page load.

Fixing the issue was actually pretty simple; I added the following to my netlify.toml file:

[[headers]]
for = "/assets/fonts/*"
[headers.values]
Cache-Control = "public, max-age=31536000"

It’s setting a header that:

  • caches every file that is downloaded from the fonts folder
  • stores them in the cache for a year

If you want to store the fonts for a shorter period, substitute 31536000 (the number of seconds in a year) for something like:

  • 604800 for a week
  • 2592000 for a month
  • 15768000 for six months

My choice of typeface is unlikely to change any time soon, so I’m happy with the max-age set to a year.

I could have done this (with a different syntax) in a Netlify _headers file instead of netlify.toml, but I prefer to keep all of my hosting config in one place as it’s tidier and would also make a move to another platform easier.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Getting started with NVDA

    Everyone who works in digital product development should be familiar with screen reader software. Here’s how to get started with NVDA on Windows.

  2. An enhancement to accessible responsive tables

    I’ve written about accessible responsive tables before but something has been bugging me. So here’s another step to make those tables even better.