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

I send a 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. Don’t meddle with user input

    Every idea comes from a good place, but some well-intended features are actually bad for usability; limiting form field input is one of those things.

  2. Getting VoiceOver to shut up

    The whole point of VoiceOver is that it talks out loud, but sometimes you need it to be quiet for a moment.