预加载本地Web字体时是否需要使用&display=swap参数

问题结论与解决方案 #

核心误区澄清

1. &display=swap是谷歌字体等公开CDN字体服务的专属查询参数，作用是让CDN返回的CSS自动包含font-display: swap配置，仅对CDN接口生效，完全不需要加在本地字体文件的URL后缀后。
   你已经在@font-face规则里手动配置了font-display: swap，已经满足谷歌性能指标的相关要求，额外加参数反而会导致字体路径错误，是触发当前告警的诱因之一。
2. 你遇到的「预加载资源未被使用」告警和display=swap无关，核心原因是预加载资源和实际调用的资源不匹配、存在冗余预加载配置。

具体修复步骤

• 删除冗余的CSS预加载规则：你已经通过<link rel="stylesheet">直接加载FontAwesome样式，额外加的同路径CSS预加载属于重复操作，直接删除以下代码：

<link rel="preload" type="text/css" as="style" href="<?php echo get_stylesheet_directory_uri(); ?>/css/fontawesome-all.min.css">

• 修正FontAwesome字体名称不匹配问题：你自定义的@font-face规则中字体名为FontAwesome-swap，但官方fontawesome-all.min.css里默认调用的字体名是FontAwesome，导致你预加载的字体文件没有被实际使用，二选一修复即可：
  • 方案1：将自定义@font-face里的font-family值改为FontAwesome，覆盖官方默认配置，预加载的字体就会被正常调用
  • 方案2：删除自定义的FontAwesome相关@font-face代码，保证预加载的字体URL和官方CSS内调用的字体URL完全一致
• 校验自定义字体调用一致性：确认页面业务CSS中给元素设置的font-family值，和你定义的AvantGarde Medium、Lucida Grande完全匹配，避免预加载字体无场景使用。

优化后参考代码

<!-- 字体预加载 -->
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/AVANTM.woff" crossOrigin="anonymous">
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/LucidaGrandeBold.woff" crossOrigin="anonymous">
<link rel="preload" as="font" type="font/woff2" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/fontawesome-webfont.woff2?v=4.7.0" crossOrigin="anonymous">   

<!-- 样式加载 -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/fontawesome-all.min.css">

<style>
    @font-face{font-family:"AvantGarde Medium";font-style:normal;font-display:swap;src:url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/AVANTM.woff)format('woff');}
    @font-face{font-family:"Lucida Grande";font-style:normal;font-display:swap;src:url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/LucidaGrandeBold.woff)format('woff');}
    @font-face {font-family: 'FontAwesome';font-display: swap;src: local('FontAwesome'), url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2');}
</style>

修复后控制台告警会消失，同时也符合谷歌性能评分的字体加载规则要求。

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