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.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email 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. Using Git restore to discard changes within a file

    git restore is great, and one of its superpowers is its patch mode where we can restore parts of a file, rather than the whole file at once.

  2. Undelete a file with Git

    I’ve talked about how great git restore is, but I missed a really obvious use of git restore: restoring a deleted file!