自定义字体RecoletaAlt在浏览器无法正常渲染的技术求助

我遇到了下载的字体无法在浏览器正常渲染的问题，具体情况如下：

@font-face 规则定义（根CSS文件 index.css） #

@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff")
    format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

HTML中的字体预加载配置 #

<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff"
  as="font"
  type="font/woff"
/>
<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff2"
  as="font"
  type="font/woff2"
/>

元素字体使用代码 #

<h2
   className="text-3xl font-semibold text-center mb-6"
   style={{
      fontFamily: "RecoletaAlt",
      fontSize: "30px",
      fontWeight: "700",
   }}
 >Get started</h2>

问题现象 #

• 浏览器元素检查显示font-family为RecoletaAlt，但实际渲染使用的是Times字体（Family name: Times，PostScript name: Times-Bold，Font origin: Local file(11 glyphs)）
• 网络面板显示字体文件已成功加载
• 项目文件结构如下：
  

排查与修复建议 #

• 修正@font-face语法错误：local("RecoletaAlt")与后续url()声明间缺少逗号，正确写法：

  src: local("RecoletaAlt"), url("./assets/fonts/RecoletaAlt.woff") format("woff"), url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  

• 统一路径匹配：CSS中字体路径为./assets/fonts/，但HTML预加载路径是./src/assets/fonts/，需根据实际文件结构统一路径（参考文件截图调整，确保CSS能正确找到字体文件）
• 优化预加载策略：将rel="prefetch"改为rel="preload"，并添加crossorigin属性，优先加载关键字体资源：

  <link
    rel="preload"
    href="./src/assets/fonts/RecoletaAlt.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />
  

• 排查本地字体冲突：local("RecoletaAlt")会优先调用本地同名字体，若本地无该字体可删除此声明，避免系统 fallback 到Times字体
• 确认字体文件有效性：检查字体文件是否包含700权重的字形，可通过字体预览工具验证文件完整性

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