React/CSS中通过@font-face无法加载本地字体问题排查

• 字体后缀拼写错误：你提到的文件名是.tff，正确的TrueType字体后缀应为.ttf，拼写错误会直接导致浏览器无法识别加载字体文件，优先检查文件名是否正确。
• 缺少字体声明规则：确认theme.js中是否通过@font-face完成字体注册，示例正确写法如下：

  @font-face {
    font-family: 'Inspiration';
    src: url('./path/to/Inspiration-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

  无此声明的话，浏览器无法关联字体文件与font-family属性，即便设置了body的字体也无效。
• 字体加载失败触发 fallback：打开浏览器控制台的Network面板，查看字体文件的请求状态：
  • 404状态：再次核对路径，注意相对路径的层级关系；
  • 跨域错误：需在服务器配置CORS允许字体文件跨域访问；
  • 200状态但字体无法解析：可能是文件损坏，重新下载字体文件测试。
• CSS优先级被覆盖：元素审查显示font-family已更新，但仍有可能存在优先级更高的选择器（如类选择器、ID选择器）覆盖了body的设置。检查Styles标签中该属性是否被划掉，若有则调整规则优先级或修改对应样式。
• 字体名称冲突：若自定义字体的font-family名称与系统字体重名，浏览器会优先加载系统字体。可将自定义字体的font-family设置为独特名称（如'Inspiration-Custom'），同步修改body的对应属性值。

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