Caching for Performance

Like raster images, fonts files can be large resources, so managing how they are cached by the browser is one of the more important things you can do to optimize your site's performance. Effective caching minimizes redundant downloads, reduces server load, and makes pages load and render more quickly.

Misconfigured headers can lead to unnecessarily repeated downloads or outdated resources being served.

Caching Configuration

An exhaustive discussion of infrastructure management is beyond our scope here (and there are tons of good resources available for that), and setting up caching rules is a routine aspect of webserver configuration, so it will be covered only briefly here.

Below is an example of configuring Apache to set cache control policies by MIME type specifically for font files (like .woff, .woff2, .ttf, etc.).

Configuration Example: Cache Control by MIME Type for Font Files

<IfModule mod_headers.c>
    <FilesMatch "\.(woff|woff2|ttf|eot|otf)$">
        Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
</IfModule>
<IfModule mod_mime.c>
    AddType font/woff .woff
    AddType font/woff2 .woff2
    AddType application/x-font-ttf .ttf
    AddType application/vnd.ms-fontobject .eot
    AddType font/opentype .otf
</IfModule>

Explanation:

1. The <FilesMatch> directive matches file extensions associated with fonts: .woff, .woff2, .ttf, .eot, .otf.
2. The Cache-Control header gives these file types a 1-year (max-age=31536000) cache lifetime.
3. The Header set Cache-Control directive adds the Cache-Control header with a directive to allow public caching and define a maximum age.
4. The AddType directive ensures that the correct MIME types are associated with the font file extensions. This is critical if Apache's default MIME type mappings don’t already handle these extensions.

MIME Types for Common Font Files

Notes

• Enable Required Modules: Ensure mod_headers and mod_mime are enabled in your Apache configuration. You can enable them using:

  a2enmod headers a2enmod mime

• Long Cache Duration: Font files are typically static assets that rarely change, so a long cache duration (e.g., one year) is ideal for performance optimization.
• Cache Busting: If fonts are updated frequently, consider appending version numbers or cache-busting query parameters to URLs to force refreshes.

HTTP Caching Headers

Caching is managed by HTTP response headers like Cache-Control and Expires. Set long expiration times for fonts that rarely change, and use immutable to avoid premature cache invalidation.

For example:

Cache-Control: max-age=31536000, immutable

The max-age value is in seconds, so this instructs the browser to cache the font for one year.

Even with long max-age values, browsers might still periodically attempt to revalidate cached resources under certain conditions, like navigating back to a page. The immutable directive eliminates these checks, ensuring the resource is always served from the cache during its max-age period.

Misconfigured caching headers can lead to several unintended consequences:

Short Cache Times

If Cache-Control: max-age is set to a very short duration (e.g., max-age=300 or 5 minutes), the browser will frequently revalidate the font with the server.

Example: A font served with max-age=300 on a heavily trafficked website could result in thousands of unnecessary requests per minute.

Effect: Increases server load, because the server needs to handle frequent conditional requests (If-None-Match for ETags or If-Modified-Since for timestamps).

No Caching Enabled

If caching headers are not set at all, the browser will assume the resource must be fetched every time the page is loaded.

Example: A missing or misconfigured Cache-Control header might leave fonts uncacheable, especially when hosting fonts via local servers.

Effect: Users repeatedly download the same font, slowing page loads and consuming bandwidth.

Stale Resources Due to Immutable Caching

If Cache-Control: immutable is used without a proper cache-busting strategy, browsers will never check for updated fonts.

Example: A font update to fix rendering issues might not be applied for users who have cached the older version indefinitely.

Effect: Outdated fonts may persist even after design updates.

Incorrect Validation Directives

Using conflicting headers like Cache-Control: no-cache, must-revalidate alongside a long max-age can cause unpredictable results.

Example: A browser might download the resource again on every page load because of contradictory instructions.

Effect: Browsers may ignore caching instructions entirely.

ETags and Validation

ETags (Entity Tags) are unique identifiers associated with a specific version of a resource. They allow the browser to check whether a cached resource is still valid by comparing the ETag with the server's current version.

When the browser requests a resource, the server might respond with:

ETag: "abc123"

On subsequent requests, the browser includes the ETag in the If-None-Match header:

If-None-Match: "abc123"

If the resource has not changed, the server responds with a 304 Not Modified status, instructing the browser to use the cached version. This reduces bandwidth and improves performance.

ETag Flow Explained in Detail

ETags (Entity Tags) are unique identifiers associated with a specific version of a resource. They allow browsers to determine if a cached version is still valid without downloading the entire resource.

Initial Request: The browser requests a font (e.g., GET /fonts/font.woff2). The server responds with the font and includes an ETag in the response headers:

HTTP/1.1 200 OK
Content-Type: font/woff2
ETag: "abc123"

Subsequent Request: On the next request, the browser includes the ETag in the If-None-Match header to validate its cached version:

GET /fonts/font.woff2
If-None-Match: "abc123"

If the font hasn’t changed, the server responds with a 304 Not Modified status:

HTTP/1.1 304 Not Modified

Effect: The browser uses the cached version, saving bandwidth and reducing load times.

If the font has been updated, the server returns a new version along with a new ETag:

HTTP/1.1 200 OK
Content-Type: font/woff2
ETag: "xyz789"

Advantages of ETags

Bandwidth Efficiency: Only metadata (headers) is exchanged if the resource hasn’t changed.

Cache Consistency: Ensures the browser always uses the correct version of a resource.

Misconfigured ETags

If the server generates overly sensitive ETags (e.g., based on timestamps that change frequently), resources may appear modified even when they haven’t actually changed, leading to unnecessary downloads.

Using curl to inspect ETag behavior

curl -I http://example.com/fonts/font.woff2

First Response: Includes an ETag like ETag: "abc123".

Validation Request: Includes If-None-Match: "abc123" to check if the resource is still valid.

Cache-Busting with Versioning

Failing to update cached fonts after a design change can result in inconsistent typography. Appending version numbers or hashes to font file URLs forces updates when fonts change. For example:

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans.woff2?v=1.0') format('woff2');
}

Browsers use the URL specified in the src attribute as a unique identifier for the font resource. The ?v=1.0 appended to the URL is part of that identifier, so when it is changed, for example, to "?v=1.1", that change creates a new identifier that forces the browser to load a new version.

Note that excessive or unnecessary versioning (e.g., with every deployment) can negate the benefits of caching by forcing frequent re-downloads.

Odd Browser-Specific Behavior

While modern browsers are mostly aligned in handling caching, there are still quirks:

Safari's Aggressive Validation

Safari often revalidates resources even when long cache durations are set:

Example: A font cached with max-age=31536000 may still result in validation requests (If-None-Match) each session.

Internet Explorer's Handling of Expires

Older versions of Internet Explorer prioritize the Expires header over Cache-Control:

Effect: If Expires is misconfigured, it can override more modern caching directives.

Chrome’s Speculative Loading

Effect: This can lead to unnecessary caching of unused resources.

Varying Support for Font Display Features

Not strictly a caching issue, but older browsers may not respect the font-display property in CSS, leading to behaviors like a Flash of Invisible Text (FOIT).