Caching fonts on Netlify
Posted 22nd February 2021 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 week2592000
for a month15768000
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.