在DigitalOcean Spaces中使用@font-face加载字体失败问题排查

针对你遇到的CSS加载正常但字体无法显示的问题，可能是以下几个配置遗漏导致的，逐一排查：

1. 字体文件路径错误（大小写+相对路径） #

你的项目结构中字体目录是Static/Fonts（大写F），但CSS中写的是../static/fonts/（小写f）。DigitalOcean Spaces是大小写敏感的存储服务，路径大小写不匹配会直接导致404错误。

修正CSS中的路径：

@font-face {
    font-family: 'poppins';
    src: url('../Fonts/Poppins-Light.woff2') format('woff2');
}

确认相对路径层级：CSS文件在Static/CSS下，向上一级到Static再进入Fonts目录，这个层级是正确的，只需保证大小写完全一致。

2. 静态文件收集不完整 #

Django部署时需要通过python manage.py collectstatic将所有静态文件收集到STATIC_ROOT指定的位置（或同步到Spaces）。如果字体文件未被正确收集：

• 检查settings.py中的STATICFILES_DIRS是否包含字体目录的上级路径：

  STATICFILES_DIRS = [
      BASE_DIR / "Static",
  ]
  

• 确认部署流程中执行了collectstatic命令，且没有跳过任何文件。

3. DigitalOcean Spaces的CORS配置缺失 #

浏览器对字体文件有跨域资源共享（CORS）限制，即使CSS来自同一域名，字体文件存放在Spaces时，需要Spaces允许你的应用域名请求资源：

• 登录DigitalOcean控制台，进入目标Spaces存储桶
• 打开Settings > CORS Configuration
• 添加规则：
  • 允许的来源（Origin）：填写你的应用域名（如https://your-app-domain.com），开发阶段可暂时用*测试
  • 允许的方法（Methods）：勾选GET
  • 允许的头部（Headers）：填写*
• 保存配置后，刷新浏览器缓存重试。

4. 字体文件的MIME类型配置错误 #

如果Spaces未正确识别字体文件的MIME类型，浏览器无法解析字体：

• 在Spaces中找到对应字体文件，查看其Metadata
• 确认Content-Type是否匹配：
  • .woff2对应font/woff2
  • .woff对应font/woff
  • .ttf对应font/ttf
• 若类型错误，手动修改Metadata中的Content-Type值。

5. 使用绝对路径替代相对路径 #

CSS中的相对路径容易出错，尤其是静态文件托管在CDN/Spaces时，建议直接使用Spaces的静态文件绝对URL：

@font-face {
    font-family: 'poppins';
    src: url('https://your-spaces-bucket.nyc3.digitaloceanspaces.com/static/Fonts/Poppins-Light.woff2') format('woff2');
}

如果CSS是通过Django模板渲染的，也可以用模板标签生成正确路径：

@font-face {
    font-family: 'poppins';
    src: url('{% static "Fonts/Poppins-Light.woff2" %}') format('woff2');
}

注意这种方式需要将CSS文件改为模板文件（如style.css改为style.css.tpl），再通过Django视图渲染输出。

内容的提问来源于stack exchange，提问作者Thomas Doll-Datema