在CodeSandbox中用React+CSS使用Fontsource遇字体加载报错，求解决方案

针对你在CodeSandbox中遇到的字体加载错误（Firefox的downloadable font: rejected by sanitizer和Chrome的Failed to decode downloaded font），可以按以下步骤排查修复：

• 确认依赖安装完整
  先检查是否已正确安装@fontsource/raleway包，若未安装，在CodeSandbox终端执行：

  npm install @fontsource/raleway
  

• 改用指定字重的导入方式
  直接导入@fontsource/raleway可能在CodeSandbox环境下存在资源解析问题，替换为具体字重的CSS导入：

  // 导入400常规字重的Raleway
  import "@fontsource/raleway/400.css";
  import "./styles.css";
  

  如果需要多个字重（比如700粗体），可以同时导入：

  import "@fontsource/raleway/400.css";
  import "@fontsource/raleway/700.css";
  import "./styles.css";
  

• 匹配CSS中的字体字重
  确保CSS里的字体字重和导入的资源对应，比如导入了400字重，就设置：

  h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 400; /* 对应导入的字重 */
  }
  

• 清除缓存并刷新页面
  浏览器缓存可能导致字体文件加载异常，清除当前页面缓存后重新刷新CodeSandbox预览页。

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