Django项目中@font-face引入的自定义字体无法加载问题

1. 修复@font-face的语法错误 #

你的@font-face代码中，local('D3 Digitalism')后缺少逗号，导致浏览器无法正确解析字体源。修正后代码：

@font-face {
    font-family: 'D3 Digitalism';
    src: local('D3 Digitalism'), url('static/chatswap/font/d3-digitalism-font/D3Digitalism.woff2') format('woff2'),
         local('D3 Digitalism'), url('static/chatswap/font/d3-digitalism-font/D3Digitalism.woff') format('woff'),
         local('D3 Digitalism'), url('static/chatswap/font/d3-digitalism-font/D3Digitalism.eot'),
         local('D3 Digitalism'), url('static/chatswap/font/d3-digitalism-font/D3Digitalism.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

2. 使用Django静态文件标签生成正确路径 #

硬写static/路径在部署时可能失效，建议用Django的{% static %}模板标签引用字体文件（需确保CSS通过模板加载或内联在模板中）：

@font-face {
    font-family: 'D3 Digitalism';
    src: local('D3 Digitalism'), url('{% static "chatswap/font/d3-digitalism-font/D3Digitalism.woff2" %}') format('woff2'),
         local('D3 Digitalism'), url('{% static "chatswap/font/d3-digitalism-font/D3Digitalism.woff" %}') format('woff'),
         local('D3 Digitalism'), url('{% static "chatswap/font/d3-digitalism-font/D3Digitalism.eot" %}'),
         local('D3 Digitalism'), url('{% static "chatswap/font/d3-digitalism-font/D3Digitalism.ttf" %}') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

若CSS为独立文件，需调整为相对于CSS文件的相对路径，或确保Django的STATIC_URL配置正确。

3. 修正内联样式的字体名格式 #

字体名含空格时必须用引号包裹，否则浏览器会拆分解析：

<body style="background-color: rgb(20,20,20); font-family: 'D3 Digitalism';">

4. 排查body{}样式不生效问题 #

• 确认样式表引入正确：检查模板中的<link>标签路径，示例：

  <link rel="stylesheet" href="{% static 'chatswap/css/your-style.css' %}">
  

• 检查样式优先级：打开浏览器开发者工具（F12），查看body元素样式，确认font-family是否被更高优先级样式覆盖。
• 临时排查可添加!important（不推荐长期使用）：

  body {
      font-family: 'D3 Digitalism' !important;
      background-color: rgb(20,20,20);
  }
  

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