Add 'preload' with the fonts in Wordpress

Question

With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.

In my CSS file it is import like this.

@font-face {
  font-family: 'Graphik Web';
  src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
  url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

But still it is not working as in the report from Google Pagespeed Insight. Please let me know if i think missed anything or to add something.

Answer 1

To get rid of that error, you have to get rid of the @import (which here translates to src url). The @import directive blocks parallel downloads. You have to change the code to import the woff in the main html with a link tag.