Google PageSpeed insights disregards rel=“preload” for mobile only

Question

As PageSpeed insights tool report claimed my page could be improved by preloading 2 of the fonts on my page, I added rel="preload" to the <link> tags in question. However, PageSpeed Insights still complains that said fonts are not being preloaded - but for Mobile version only. Desktop version is fine.

This being said, here's exact code for one of the fonts:

<link rel="preload" href="https://www.aircharteradvisors.com/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff" as="font" type="font/woff" crossorigin>

Also, I did check to make sure JS isn't adding that after page load, and it's not. That's what I get on the first request in response body.

Answer 1

You need to add font-display: swap; to @font-face in your CSS as well.

@font-face {
  font-family:'icomoon';  
  (... all the other instructions ...)
  font-display: swap;
}