WordPress中theme.json配置自定义Google字体不生效问题求助

核心问题是字体文件未被正确加载到前端，浏览器找不到指定字体就会 fallback 到 Times New Roman。以下是你缺失的关键步骤：

1. 注册并加载字体的@font-face规则 #

你只把woff2文件放到了插件目录，但没有告诉WordPress要把字体文件的加载规则输出到前端。需要创建一个CSS文件（比如fonts.css）放在插件目录里，内容如下：

@font-face {
    font-family: 'Roboto'; /* 这个名称要和theme.json里的完全一致 */
    src: url('fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 优化加载体验，避免FOIT */
}

然后在插件主文件里用wp_enqueue_style加载这个CSS：

function enqueue_custom_fonts() {
    wp_enqueue_style(
        'custom-google-fonts',
        plugins_url('fonts.css', __FILE__),
        array(),
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

注意：plugins_url会自动生成插件目录的绝对URL，避免相对路径导致的404错误。

2. 确保theme.json中的字体家族名称与@font-face完全匹配 #

检查你通过wp_theme_json_data_theme添加的字体配置，fontFamily的值必须和@font-face里的font-family完全一致（包括大小写、空格）。比如：

{
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Roboto', sans-serif",
                    "name": "Roboto",
                    "slug": "roboto"
                }
            ]
        }
    }
}

这里的'Roboto'要和@font-face里的font-family: 'Roboto';完全对应。

3. 验证字体文件的可访问性 #

• 在浏览器中直接访问字体文件的URL（比如https://你的域名/wp-content/plugins/你的插件名/fonts/Roboto-Regular.woff2），如果返回404，说明路径错误，检查文件位置和plugins_url的参数是否正确。
• 如果返回403，可能是文件权限问题，把字体文件的权限设置为644，目录权限设置为755。

4. 添加woff2文件的MIME类型支持 #

有些服务器默认不识别woff2的MIME类型，会导致字体文件无法正确加载。可以在插件中添加以下代码：

function add_woff2_mime_type($mimes) {
    $mimes['woff2'] = 'font/woff2';
    return $mimes;
}
add_filter('upload_mimes', 'add_woff2_mime_type');

或者在服务器的.htaccess文件中添加：

AddType font/woff2 .woff2

5. 清除所有缓存 #

• 清除WordPress缓存插件的缓存（如果有）
• 清除浏览器缓存（快捷键Ctrl+Shift+R强制刷新）
• 如果使用了CDN，也需要清除CDN缓存

做完以上步骤后，浏览器就能正确加载字体文件，不再 fallback 到Times New Roman了。

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