看起来你遇到的核心问题大概率是CSS文件后缀导致Jekyll没有编译你的Sass导入，另外还有几个常见坑可以逐一排查：

1. 关键问题：将style.css重命名为style.scss #

你当前的style.css是纯CSS后缀，但里面写了Sass语法的@import "{{ site.theme }}";和@import "fonts";——Jekyll只会自动编译.scss/.sass后缀的文件，.css文件会直接被复制到输出目录，不会处理其中的Sass导入语句。这意味着你的fonts.scss里的@font-face规则根本没有被加载到最终的CSS里！

解决方法：

• 把docs/assets/css/style.css改名为docs/assets/css/style.scss
• 保持里面的代码不变，Jekyll现在会正确解析@import "fonts";，把fonts.scss的内容合并到最终的CSS中。

2. 验证字体文件路径是否正确 #

即使解决了编译问题，路径错误也会导致字体加载失败。你的fonts.scss里的路径是../fonts/Capsmall.ttf，需要确认编译后的CSS文件位置和字体文件的相对关系：

• 编译后，style.scss会变成_site/assets/css/style.css
• 字体文件在_site/assets/fonts/Capsmall.ttf
• 所以相对路径../fonts/Capsmall.ttf是正确的（从css目录上一级到assets，再进入fonts目录）。但如果你的Jekyll配置里设置了baseurl，建议改用绝对路径避免问题：

  @font-face {
    font-family: 'CaptureSmallz';
    src: url('{{ site.baseurl }}/assets/fonts/Capsmall.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

3. 检查文件名大小写 #

如果你的部署环境是Linux/服务器（大小写敏感），一定要确保字体文件名Capsmall.ttf和@font-face里的url('../fonts/Capsmall.ttf')完全一致——比如如果实际文件名是capsmall.ttf或者CapSmall.ttf，都会导致404错误。

4. 确认字体是否真的加载 #

打开浏览器开发者工具（F12），切换到Network面板，刷新页面后搜索Capsmall.ttf：

• 如果看不到这个请求：说明@font-face规则没被加载（回到问题1确认文件后缀）
• 如果请求状态是404：说明路径错误（回到问题2调整路径）
• 如果请求成功：检查字体是否正确渲染，可能是样式被覆盖了

5. 排查样式优先级问题 #

如果字体已加载但body文字没变化，可能是主题的样式优先级更高。可以临时给body的font-family加!important来测试：

body {
  font-family: 'CaptureSmallz' !important;
}

如果生效了，说明你需要用更具体的选择器（比如html body）来覆盖主题样式，而不是依赖!important。

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