Adobe Typekit - Pagespeed Insights - 确保文本在 webfont 加载期间保持可见

Question

我已尽一切努力使字体显示适用于我的 Adobe Typekit 字体。我在 google pagespeed insights 中仍然收到错误“确保文本在 webfont 加载期间保持可见”。我找不到有关此特定问题的任何论坛。

pagespeed insights 错误显示此链接是罪魁祸首：

https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3 我已确保选择字体显示：在我的 Adobe 项目中交换，如此链接所示：

https://use.typekit.net/wqe8olp.css

在我的 functions.php 文件中，我添加了这样的字体：

function add_typekit_fonts()
{
  echo '<link rel="preconnect" href="https://use.typekit.net" crossorigin>' . "\n";
  echo '<link rel="preload" as="style" href="https://use.typekit.net/wqe8olp.css">' . "\n";
  wp_enqueue_style('typekit-fonts', 'https://use.typekit.net/wqe8olp.css', array(), null, 'print');
  echo '<noscript><link rel="stylesheet" href="https://use.typekit.net/wqe8olp.css"></noscript>' . "\n";
}

add_action('wp_head', 'add_typekit_fonts');

最后，将它添加到我的 CSS

@font-face {
  font-family: 'sofia-pro';
  src: local('sofia-pro'), url(https://use.typekit.net/wqe8olp.css?family=sofia-pro&display=swap);
  font-display: swap;
}

仍然出现同样的错误。

我不确定我还能做什么。我知道使用 google 字体有一个 URL 属性可以将它添加到链接本身中，但是我没有找到关于 Typekit 字体的任何信息。我错过了什么？