在Wordpress中添加带有字体的“预加载”

问题描述

使用节点模块，我将此文件添加到主题中。但是它显示在“ 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的报告中那样工作。请让我知道我是否错过了任何内容或添加一些内容。

解决方法

要摆脱该错误，您必须摆脱@import（此处转换为src url）。 @import指令阻止并行下载。您必须更改代码以使用链接标签将woff导入到主html中。