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.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

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. Setting an upstream Git branch

    There’s no such thing as syncing in Git, but setting an upstream branch is about as close as it gets.

  2. How to rename the ‘master’ branch on GitHub

    So renaming master to main is a good idea, but how do we do it? Fortunately, it’s really straightforward if your repository lives on GitHub.