How to Cache Fonts on Netlify?

Mar 28, 2021·🍿 2 min. read

Font optimisation techniques, such as pre-loading, not only can contribute to more efficient Core Web Vitals scores, but also can help prevent your visitors from experiencing FOUT and FOIT. Our today’s topic will focus on HTTP Cache and how to utilise it to cache self-hosted fonts on Netlify.

We will start off with a brief brush up on how HTTP Cache works and what doors it unlocks. Then, I’ll walk you through the steps I followed to cache my fonts on this website.

TL;DR

For those of you who want to cut to the chase, hit the copy button and paste the snippet into your netlify.toml configuration file:

Copy
[[headers]]
  for = "/fonts/*"
  [headers.values]
    cache-control = '''
    max-age=365000000,
    public
    immutable'''

How Does HTTP Cache Work?

1. When the browser encounters a request to an asset while parsing your HTML’s metadata, it checks whether there’s already a valid cache response in its cache, before reaching out to the web server.
2. If there’s no cache that would fulfill the request or the cache is stale, the request gets forwarded to the web server.
3. The web server processes the request and acts accordingly — it sends the requested asset back over the wire. Besides, if configured, it augments the response headers with Cache-Control to specify the directives for caching mechanisms (for example, for how long the cache will be considered fresh).

In a nutshell, that’s it. One of the major benefits of caching is that on subsequent requests to the same asset, the browser does not need to carry out the transmission of the request towards the server over and over again.

Instead, so long as the cached response’s lifetime has not expired yet, the browser will intercept the request and reuse the previously cached response to fulfill it. Consequently, we are gaining on speed by reducing the roundtrips between the browser and the server.

Caching Fonts on Netlify

We have already touched on the configuration part — it’s as straightforward as adding an additional header to outgoing responses. When it comes to Netlify, hooking into and altering their default caching behaviour is literally a piece-of-cake-task.

For the sake of completeness, here’s the exact same snippet from the TL;DR section:

Copy
[[headers]]
  for = "/fonts/*"
  [headers.values]
    cache-control = '''
    max-age=365000000,
    public
    immutable'''

If TOML is somewhat confusing, the JSON equivalent may help better grasp what’s going on:

Copy
{
  headers: [
    {
      for: "/fonts/*",
      values: {
        "cache-control": "max-age=365000000,public,immutable"
      }
    }
  ]
}

Let me briefly expand upon what’s happening here.

The for keyword declares the path or URL which the headers will be added to. In my case, I self-host my fonts and they live inside the static/fonts folder, which ultimately will be exposed via the /fonts route. Therefore, the following link pointing to the Poppins font on my site will match the /fonts/* pattern:

Copy
<link
  rel="preload"
  href="/fonts/Poppins-Regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Onto the values keyword. As the name suggests, here you can tie the header values up to the route it’s grouped under. The max-age=<seconds> directive dictates the lifetime of a resource, that is, the maximum amount of time a resource is considered fresh. Given that the fonts on my site are quite unlikely to change in the foreseeable future, I store them for more than a year.

And that’s a wrap, folks!