font-display 'optional': disk cached fonts do not apply

Question

In our website we using external Google font:

As a result it returns CSS like this:

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url(https://fonts.gstatic.com/s/rubik/v19/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...

When new users first time comes to site fonts are never do apply - and that acceptable to me, because it's one of the drawbacks of using font-display: 'optional'. Also I can confirm that both CSS file from Google and fonts are still loaded by the browser and are cached (they are just do not apply on first page visit). CSS file is cached for 24h and font files itself are cached for 1 year. If I reload same page (Ctrl+R) then fonts are applied. So far all good.

But the problem is that if I open same page in new Chrome tab (i.e. new session) then fonts doesn't apply again. I checked DevTools's Network tab and I can confirm that fonts were loaded from Disk Cache. Since fonts were loaded from cache I expect that they will be applied every time until cache time expires - but that doesn't happen. Fonts are applied only if I'm refreshing same Chrome tab. New sessions (new tabs) gives me page without fonts.

I understood 1 thing: if I do simple page reload (Ctrl+R) then I see that fonts were loaded from Memory cache, and fonts are applied. But new sessions (new tabs) will cause fonts to load from Disk cache - and probably that's why they don't apply. On my developer machine I have pretty fast M2 SSD disk, so it's a little bit weird why Disk cached fonts doesn't apply.

One more thing may worth to mention - I have pretty bad Total Blocking Time score (Core Web Vital TTB metric). Can it be the reason why Disk cached fonts do not apply?

Is there some way to fix this problem?

Thanks.

user_16752210 · Answer

This is happening because you are using display: optional, as stated yourself. You need to make this to display: swap in order for things to work properly. Below is what your updated links would look like:

Notice we are not using optional display anymore, so now cached fonts will apply, as requested.

user_7738736 · Answer

If you are loading the external Google links in your like this:

Then in your CSS, you do not need to use the @font-face, you simply add the font-family to your class/tag, like so:

body {
  font-family: 'Rubik';
  font-size: 16px;
}

user_4123837 · Answer

Just I have tested on my system on every new tab will load from the memory cache only if we use swap in the link tag.

font-display 'optional': disk cached fonts do not apply

3 Answers