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.
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.