How can I set Cache TTL for woff and woff2 font files with htaccess?

My WordPress site htaccess file currently has these entries to set cache expiry for woff and woff2 font files:

IfModule mod_expires.c
  # Content type
    AddType application/font-woff   .woff
    AddType application/font-woff2  .woff2
    ExpiresActive on
  # Web fonts
    ExpiresByType application/font-woff   access plus 1 year
    ExpiresByType application/font-woff2  access plus 1 year
/IfModule

But I'm still getting suggestions to set cache TTL for these files in speed testing tools. Here's one example with a cache efficiency problem: https://gtmetrix.com/reports/bydik.com/ad8hZTzh/

Is there anything wrong with my htaccess file? How can I solve this?

Topic fonts htaccess cache Wordpress

Category Web


ExpiresByType font/woff2  "access plus 1 year"
ExpiresByType application/font-woff2  "access plus 1 year"
ExpiresByType application/x-font-woff2  "access plus 1 year"

You need to set ExpiresActive On (at the top) for these directives to have any effect.

You also don't need all 3 of these directives. You should check the Content-Type HTTP response header for the mime-type your server is sending with this resource - it can only be one. The mime-type needs to match the response from your server.

To determine whether these directives are working or not, you should check for the Expires and Cache-Control: max-age headers in the HTTP response.

UPDATE: You are using a CDN (Cloudflare), so ultimately the cache response headers are going to be determined by the CDN.

You are serving two font files:

  1. https://example.com/libs/fonts/fontsolaimanlipi.woff
  2. https://example.com/fonts/fontawesome.woff2

The first is a woff font file (not woff2) and is sent with a application/x-font-woff mime-type (so the above directives would need to be modified for this).

The second is not sending a Content-Type header at all (so the above directives will not apply, unless you have an ExpiresDefault directive?), so maybe your server is not enabled for this mime type. For example:

AddType font/woff2 .woff2

Or maybe this can be configured in the CDN.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.