确保文本在 webfont 加载期间保持可见 - TypeKit PageSpeed Insights

Question

我有一个网站https://www.rosterelf.com/，Google PageSpeed Insights 一直在告诉我

确保文本在 webfont 加载期间保持可见

对于这个代码<link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css">

因此我研究了一些方法来解决这个问题，因此我更新到下面的代码

<link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap">

通过在上面的代码中添加?family=proxima-nova&display=swap。

但 Google PageSpeed Insights 仍然抛出我同样的错误。

我尝试了其他几种方法，例如在.htaccess 中启用缓存，如ExpiresByType text/css "access 1 month" 等.. 但这个错误仍然存​​在。

有人可以指导我在这里做什么吗？

非常感谢。

Answer 1

我找不到任何有关 typekit 的“?family=proxima-nova&display=swap”之类的文档。如果你打开https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap，你会看到字体显示设置为自动。

但是，您可以编辑 typekit 配置以将显示设置为交换，请参阅这篇文章： https://helpx.adobe.com/fonts/user-guide.html/fonts/using/font-display-settings.ug.html

如果您无法控制 typekit，则可以将显示设置为在本地 css 文件中交换：

@font-face {
            font-family: 'proxima-nova';
            src: local('proxima-nova'), url(https://use.typekit.net/dgp2bhj.css);
            font-display: swap;
 }