Nginx服务器@font-face失效但本地正常的技术求助

本地环境中通过CSS配置自定义字体可正常显示，但部署到Nginx服务器后失效，页面显示系统默认字体。相关配置如下：

自定义字体CSS配置 #

@font-face {
  font-family: 'MyCustomFont1';

  src:
    local('MyCustomFont1'),
    url('IRANSansXV.woff2') format('woff2'),
    url('IRANSansXFaNum-DemiBold.woff') format('woff'),
    url('Digi Lotos Bold.ttf') format('ttf'),

}

Body字体设置 #

body {
  font-family: MyCustomFont1;
  font-variation-settings: "wght" 400, "rdot" 0.5
}

Nginx MIME类型配置（mime.types） #

types {
    font/ttf                              ttf;
    font/otf                              otf;
    font/woff                             woff;
    font/woff2                            woff2;

    application/x-font-ttf                ttf;
    font/opentype                         otf;
    application/vnd.ms-fontobject         eot;
    font/x-woff                           woff;
    application/font/woff2                woff2;
    application/font-woff                 woff;
}

Nginx Server配置 #

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

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

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

• 修复CSS语法错误
  @font-face的src列表最后一项多了冗余逗号，且TTF格式的标识写法错误，这会导致浏览器解析CSS失败。修改后的代码：

  @font-face {
    font-family: 'MyCustomFont1';
  
    src:
      local('MyCustomFont1'),
      url('IRANSansXV.woff2') format('woff2'),
      url('IRANSansXFaNum-DemiBold.woff') format('woff'),
      url('Digi Lotos Bold.ttf') format('truetype');
  }
  

  注：TTF格式的正确标识是truetype，而非ttf。

• 统一Nginx Location规则
  现有配置中存在重复的location规则，Nginx会优先匹配第一个，第二个规则完全失效。合并为单一规则：

  server {
          listen 80 default_server;
          listen [::]:80 default_server;
  
          root /var/www/html;
  
          location ~* \.(eot|otf|ttf|woff|woff2)$ {
                  add_header Access-Control-Allow-Origin *;
                  expires max;
          }
  }
  

• 清理冗余MIME类型
  mime.types中同一后缀对应多个MIME类型可能导致解析冲突，保留标准现代字体类型即可：

  types {
      font/ttf                              ttf;
      font/otf                              otf;
      font/woff                             woff;
      font/woff2                            woff2;
      application/vnd.ms-fontobject         eot;
  }
  

• 检查字体文件路径与权限

  • 确保字体文件放置在Nginx根目录（/var/www/html）下，或CSS中url()的相对路径正确（例如CSS在css/文件夹时，路径应为../IRANSansXV.woff2）。
  • 核对服务器上字体文件名：Linux系统区分大小写，带空格的文件名需完全匹配（如Digi Lotos Bold.ttf不能写成digilotosbold.ttf）。
  • 设置文件权限，确保Nginx运行用户（通常为www-data）可读取：

    chmod 644 /var/www/html/*.ttf /var/www/html/*.woff /var/www/html/*.woff2
    chown www-data:www-data /var/www/html/*.ttf /var/www/html/*.woff /var/www/html/*.woff2
    

• 清除浏览器缓存
  部署后强制刷新页面（Ctrl+F5）或清除浏览器缓存，避免加载旧的CSS或字体资源。

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