添加 'preload' 与 Wordpress 中的字体

Question

通过节点模块，我将这个文件添加到我的主题中。但它显示在“Google Pagespeed Insight”中。 考虑使用 <link rel=preload> 优先获取当前在页面加载后请求的资源。

在我的 CSS 文件中，它是这样导入的。

@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;
}

但它仍然无法像 Google Pagespeed Insight 的报告中那样工作。如果我认为遗漏了什么或要添加什么，请告诉我。

Answer 1

要消除该错误，您必须消除@import（此处转换为 src url）。 @import 指令阻止并行下载。您必须更改代码以使用 link 标记在主 html 中导入 woff。

添加 'preload' 与 Wordpress 中的字体

Add 'preload' with the fonts in Wordpress

css

preload

node-modules

google-pagespeed-insights-api