为WordPress Create-Block插件添加本地字体：前端字体加载404问题求助

问题的核心在于前端样式被内联后，字体的相对路径解析逻辑变了：

• 后端编辑器中，样式是作为独立CSS文件加载的（路径类似/wp-content/plugins/your-block/build/style-index.css），所以url(fonts/xxx)会被解析为相对于这个CSS文件的路径，也就是/wp-content/plugins/your-block/build/fonts/xxx，能正确找到字体。
• 但前端页面中，样式被内联到<style>标签里，此时url(fonts/xxx)会被解析为相对于网站根目录的路径（/fonts/xxx），而你的字体实际存放在插件的build/fonts文件夹里，自然返回404。

下面提供两种可靠的解决方案：

方案1：手动注册前端样式为外部文件（推荐） #

这种方法让前端加载独立的CSS文件，保持相对路径的正确性，是最稳妥的方案，也适合插件分发场景：

1. 打开你的块插件主PHP文件（比如gutenpride.php），修改块注册代码：

function create_block_gutenpride_block_init() {
    // 手动注册前端样式
    wp_register_style(
        'wp-block-create-block-gutenpride-style',
        plugins_url( 'build/style-index.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' ) // 自动更新版本号，避免缓存问题
    );

    // 注册块时指定我们手动注册的样式handle
    register_block_type( __DIR__ . '/build', array(
        'style' => 'wp-block-create-block-gutenpride-style',
    ) );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

2. 重新构建你的块（运行npm run build），刷新前端页面后，字体路径会自动解析为相对于CSS文件的正确位置，404问题即可解决。

方案2：修改Webpack配置生成绝对字体路径 #

如果你偏好保持样式内联的方式，可以通过修改Webpack配置，让构建工具直接生成绝对路径的字体URL：

1. 在你的块项目根目录创建webpack.config.js文件，内容如下：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    output: {
        ...defaultConfig.output,
        // 替换成你的插件build目录的绝对网站路径
        publicPath: '/wp-content/plugins/gutenpride/build/',
    },
};

2. 重新运行npm run build，构建后的CSS中字体URL会变成绝对路径（比如/wp-content/plugins/gutenpride/build/fonts/AmaticSC-Regular.caaf513a.ttf），即使样式被内联到前端，也能正确访问字体文件。

额外注意 #

• 确认运行npm run build后，字体文件已被正确复制到build/fonts文件夹中；
• 方案1更灵活，不依赖固定的网站路径，适合需要分发的插件；方案2适合固定环境的开发场景。

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