WordPress中如何在head预加载Google字体？为何预加载后字体不显示？

核心原因：缺失跨域资源共享（CORS）属性 #

Google Fonts的字体文件托管在fonts.gstatic.com，属于跨域资源。你的代码仅给preconnect标签添加了crossorigin，但预加载、异步样式表标签都未声明该属性，导致浏览器拦截了字体文件的加载请求——尽管HTML源码中能看到引用，但实际字体资源无法被正常读取。

修复步骤 #

1. 给预加载标签添加crossorigin #

预加载as="style"的Google Fonts CSS资源时，必须加上crossorigin，否则预加载的资源无法被后续样式表复用，同时字体文件会因CORS限制被阻止：

$preload .= '<link rel="preload" as="style" href="'.$font_1.'" crossorigin>
<link rel="preload" as="style" href="'.$font_2.'" crossorigin>';

2. 给异步样式表标签添加crossorigin #

异步加载的样式表同样需要该属性，确保浏览器能正确处理其中引用的跨域字体：

$preload .= '<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('."media".');" href="'.$font_1.'" crossorigin>
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('."media".');" href="'.$font_2.'" crossorigin>';

3. 完善无JS fallback的crossorigin #

noscript区块的样式表也建议加上该属性，保证无JS环境下字体正常加载：

$preload .= '<noscript>
<link rel="stylesheet" href="'.$font_1.'" crossorigin>
<link rel="stylesheet" href="'.$font_2.'" crossorigin>
</noscript>';

完整修复后的代码 #

function preload_assets() {

    $font_1 = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,700&display=swap";
    $font_2 = "https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,300;0,8..144,400;1,8..144,200&display=swap";

    // 预连接字体相关域名
    $preload = '<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';

    // 预加载样式资源，添加crossorigin
    $preload .= '<link rel="preload" as="style" href="'.$font_1.'" crossorigin>
    <link rel="preload" as="style" href="'.$font_2.'" crossorigin>';

    // 异步加载样式，添加crossorigin
    $preload .= '<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('."media".');" href="'.$font_1.'" crossorigin>
    <link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('."media".');" href="'.$font_2.'" crossorigin>';

    // 无JS fallback，添加crossorigin
    $preload .= '<noscript>
    <link rel="stylesheet" href="'.$font_1.'" crossorigin>
    <link rel="stylesheet" href="'.$font_2.'" crossorigin>
    </noscript>';

    echo $preload;

}

add_action( 'wp_head', 'preload_assets' );

额外验证建议 #

• 检查前端CSS是否正确引用字体族，比如font-family: 'Poppins', sans-serif;，需和入队方式的用法一致。
• 通过浏览器开发者工具的网络面板查看字体文件状态：返回200则加载正常，若出现CORS错误，重新核对crossorigin属性是否全量添加。

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