先把你的配置贴出来方便参考：

@font-face { 
  font-family: Han Sans; 
  src: url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff2) format('woff2'), 
       url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff) format('woff'), 
       url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.ttf) format('truetype'); 
  font-weight: 500; 
}

根据这个配置，我整理了几个最可能导致字体无法加载的原因，你可以按顺序排查：

1. 跨域资源共享（CORS）限制 #

这是字体加载失败的头号元凶。如果你的网页域名和before-the-dawn.com不是同一个，浏览器会出于安全策略阻止跨域加载字体资源。

• 验证方式：打开浏览器控制台（F12），如果看到类似No 'Access-Control-Allow-Origin' header is present on the requested resource的报错，就实锤是CORS问题。
• 解决方法：在托管字体的服务器上添加CORS响应头。比如用Nginx的话，在配置里加：

  location ~* \.(woff|woff2|ttf)$ {
    add_header Access-Control-Allow-Origin *;
  }
  

  或者指定你的网页域名代替*，更安全。

2. 字体文件路径或权限问题 #

• 先手动验证URL有效性：把http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff2复制到浏览器地址栏，看看能不能下载文件。如果返回404，说明文件路径写错了，或者你上传时放错了目录；如果返回403，说明服务器设置了权限，不让外部访问。
• 检查文件名大小写：有些服务器（比如Linux）区分大小写，如果你上传的文件名是Han-Sans-Regular.woff2，但代码里写的是小写，就会找不到文件。

3. 字体字重不匹配 #

你设置了font-weight: 500，但你的字体文件命名是han-sans-regular——通常regular对应的字重是400。如果实际字体文件的字重是400，但你在@font-face里写500，浏览器在需要500字重的时候才会用这个字体，而普通文本（默认400）会 fallback 到系统字体。

• 解决方法：把font-weight: 500改成font-weight: 400，或者确认你的字体文件确实是500字重的版本。

4. CSS引用优先级问题 #

就算字体加载成功，也可能被其他CSS规则覆盖：

• 确保你在使用字体的时候，选择器优先级足够高，比如：

  body {
    font-family: 'Han Sans', sans-serif;
    font-weight: 400; /* 和@font-face里的字重对应 */
  }
  

• 注意字体名称有空格时，最好加单引号或双引号，避免解析问题。

5. 浏览器缓存与开发者工具排查 #

打开浏览器DevTools的Network标签，刷新页面后过滤"Font"类型的请求：

• 看请求状态码：200是正常，404/403是路径/权限问题，405是方法不允许。
• 看响应头：检查Content-Type是否正确（woff2对应font/woff2，woff对应font/woff），如果类型不对，浏览器可能无法识别字体。

先从验证URL和检查控制台报错开始，这两步能最快定位问题。

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