WordPress站点自定义@font-face字体仅本地生效其他设备无法渲染

问题核心原因 #

你本地设备已经提前安装了Arfelick Feather字体，浏览器渲染时直接调用了本地字体文件，没有发起服务器请求，所以本地显示正常。其他设备没有安装对应字体，需要从服务器加载字体时触发了异常，才会出现失效问题。

常见问题及修复方案 #

• 跨域资源共享(CORS)限制
  你站点访问地址是http://grubexotic.com，但@font-face中字体链接使用的是带www的https://www.grubexotic.com域名，二者属于不同源地址，浏览器默认跨域规则会阻止字体文件加载。
  修复方式：要么统一站点全站的域名访问规则（全部带www或者全部不带），要么在服务器配置中添加字体文件跨域访问许可：

  • Apache环境（站点根目录.htaccess文件添加规则）：

  <FilesMatch "\.(eot|otf|svg|ttf|woff|woff2)$">
      Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
  

  • Nginx环境（站点配置文件中添加规则）：

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

• 路径与大小写兼容问题
  Windows、macOS本地环境对文件路径大小写不敏感，但绝大多数线上服务器使用Linux系统，路径大小写完全匹配才能正常读取文件。需要逐一确认子主题文件夹名称、字体存放目录名称、字体文件名的大小写，和你@font-face中写的路径完全一致。
  也可以直接将绝对路径替换为相对路径，避免域名差异导致的问题：把src里的链接改成相对于子主题style.css的路径即可，示例：

src: url(./fonts/arfelickfeather/Arfelick-Feather.eot) format("embedded-opentype")

• 文件权限配置错误
  线上服务器中字体文件、存放目录的权限配置不当会导致访客读取时返回403错误。建议将字体存放目录权限设为755，单个字体文件权限设为644。

• 缓存未更新
  站点的CDN缓存、服务器缓存、WordPress缓存插件缓存可能还保留了旧的CSS规则或者失效的字体请求结果，修复配置后需要清空所有缓存，再用浏览器无痕模式配合F12开发者工具的控制台/网络面板，查看是否还有字体相关的报错。

内容的提问来源于stack exchange，提问作者Taylor Pepler-Madsen