AstroJS项目中本地自定义字体无法加载问题排查

你的操作回顾 #

• 在src/styles/main.scss中配置@font-face规则
• 在Base.astro中导入该样式文件
• 为h1指定字体Morganite
• 字体文件已放在public/fonts目录，其他样式正常但字体未生效，控制台无报错

可能的问题及解决办法 #

1. @font-face的format值错误 #

TTF字体的format参数应该是'truetype'，不是'ttf'，修正后的代码：

@font-face {
  font-family: 'Morganite';
  src: url('/fonts/Morganite.ttf') format('truetype'); /* 修正format值 */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

2. 字体权重不匹配 #

你给Morganite的@font-face指定了font-weight: bold，但h1的默认权重可能未明确匹配该值，需要显式指定h1的权重与@font-face一致：

h1 {
    font-family: 'Morganite', sans-serif;
    font-size: 40px;
    font-weight: bold; /* 确保权重和@font-face定义一致 */
}

3. 文件名/路径大小写敏感 #

Astro的文件路径区分大小写，确认public/fonts下的文件名和url()中的写法完全一致，比如Morganite.ttf不能写成morganite.ttf。

4. 浏览器缓存干扰 #

强制刷新页面（Ctrl+Shift+R）或清除浏览器缓存，避免旧样式缓存导致字体未加载。

5. 字体文件本身损坏 #

用字体预览工具打开Morganite.ttf和Outfit.woff2，确认文件未损坏；或更换可靠的字体文件重新测试。

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