Docusaurus无法加载本地自定义字体问题求助

以下是针对该问题的具体修复步骤：

1. 修正字体文件路径 #

Docusaurus构建后，static目录下的资源会被部署到网站根目录，因此CSS中引用字体文件时需要使用绝对路径，而非相对路径。修改src/css/custom.css中的@font-face规则：

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

2. 规范字体族与变量配置 #

避免为不同权重单独定义字体族，改用统一字体族+权重的方式，同时添加回退字体保障兼容性：

:root {
  --ifm-color-primary: #2e32ae;
  --ifm-font-family-base: 'Poppins', sans-serif;
  --ifm-heading-font-family: 'Poppins', sans-serif;
  --ifm-heading-font-weight: 700;
  --ifm-font-family-monospace: 'Poppins', sans-serif;
}

3. 确认CSS文件正确引入 #

检查docusaurus.config.js，确保自定义CSS已被配置加载：

module.exports = {
  // 其他配置项...
  stylesheets: [
    '/css/custom.css',
  ],
};

4. 清除构建缓存并重新构建 #

缓存可能导致资源未更新，执行以下命令：

• 清除缓存：npm run clear（或yarn clear）
• 本地开发：npm run start -- --no-cache
• 生产构建：npm run build（或yarn build）

5. 验证字体加载状态 #

打开浏览器开发者工具（F12），切换到网络标签，过滤Font类型，确认字体文件返回200状态码。若出现404，检查路径是否与实际部署后的资源路径一致。

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