Adobe Typekit字体加载问题：Google Pagespeed仍报文本可见性错误

核心问题分析 #

• 错误的媒体查询设置：你在wp_enqueue_style中把样式表的媒体类型设为'print'，这意味着该样式仅在打印场景下生效，浏览器在屏幕渲染时会忽略这个样式表，转而加载Typekit动态生成的未指定font-display的字体资源——这是Pagespeed报错的关键原因。
• 无效的自定义@font-face：你手动添加的@font-face规则存在错误：src指向的是Typekit的CSS文件而非字体文件，且Typekit官方样式表已包含完整的@font-face定义，重复定义不仅无效还可能引发冲突。

修复步骤 #

1. 修正字体样式的加载逻辑 #

修改functions.php中的add_typekit_fonts函数，移除print媒体类型参数，确保样式表在屏幕场景下正常加载：

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";
  // 移除最后一个参数'print'，默认媒体类型为'all'
  wp_enqueue_style('typekit-fonts', 'https://use.typekit.net/wqe8olp.css', array(), null);
  echo '<noscript><link rel="stylesheet" href="https://use.typekit.net/wqe8olp.css"></noscript>' . "\n";
}

add_action('wp_head', 'add_typekit_fonts');

2. 删除无效的自定义@font-face规则 #

删掉你在CSS中手动添加的@font-face代码，避免与Typekit官方样式冲突。

3. 验证Typekit项目的font-display设置 #

再次确认Adobe Typekit项目的配置：

• 登录Typekit后台打开对应项目
• 在「Font Settings」中找到「Font Display」选项，确认选中「Swap」
• 保存并重新发布项目，确保样式表更新生效

4. 额外优化：预加载字体文件（可选） #

如果Pagespeed仍有提示，可直接预加载报错指向的字体文件，进一步降低加载延迟：

function add_typekit_fonts()
{
  echo '<link rel="preconnect" href="https://use.typekit.net" crossorigin>' . "\n";
  echo '<link rel="preconnect" href="https://p.typekit.net" crossorigin>' . "\n";
  // 预加载报错的字体文件，替换为你的实际字体URL
  echo '<link rel="preload" as="font" href="https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" type="font/woff2" 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);
  echo '<noscript><link rel="stylesheet" href="https://use.typekit.net/wqe8olp.css"></noscript>' . "\n";
}

add_action('wp_head', 'add_typekit_fonts');

效果说明 #

修正媒体类型后，浏览器会正确加载你配置了font-display: swap的Typekit样式表，确保字体加载期间文本始终可见；移除无效自定义规则避免了样式冲突，让官方规则正常生效；预加载字体文件则进一步强化了加载性能。

内容的提问来源于stack exchange，提问作者Danielle Roberson