Gtmetrix shows error - cache expired

During testing website on gtmetrix it constantly shows errors with fonts/cache expired.

Screenshots from gtmetrix:

Maybe it is due to MIME Type not being cached?

Or your Web browser recognized there is some other MIME Type like woff2, and did not download TTF, but rather WOFF2? (which is why 0 content is for .ttf file?)

Can you try to convert your TTF font to some other type like woff, woff2, svg, eot, and call them in your CSS file under @font-face{...}?

Later on, you may need to call the font file using <link> meta TAG.

Due to some Operating System and Web browsers compatibility and support, some of them understand, some does not, the MIME Type (font format), which is why you need more than one font format type to include so the Web browser knows which to pick.

Would look like this:

<link rel="preload" href="URL_TO_YOUR_FONT/font-name.woff2" as="font" crossorigin="anonymous">
<link rel="stylesheet" href="URL_TO_YOUR_STYLE/style.css" type="text/css" media="all">

Inside your CSS file, have like:

@font-face {
  font-family: YourFontName;
  font-display: fallback;
  src: 
    url(css/fonts/YourFontName.woff2) format("woff2"),
    url(css/fonts/YourFontName.woff) format("woff"),
    url(css/fonts/YourFontName.ttf) format("truetype"),
    url(css/fonts/YourFontName.eot?#iefix) format("embedded-opentype"),
    url(css/fonts/YourFontName.svg#YourFontName) format("svg");
}

When wanting your font for body, html, h1, or some other HTML tag, use like

.my-class{
    font-family: YourFontName;
   /* other css stuff ... */
}

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.