网站Web Font加载失败求助：字体路径配置问题排查

以下是针对字体加载失败问题的具体排查和解决步骤：

1. 修正SCSS中@font-face的路径配置 #

你的SCSS源文件路径为wp-content/themes/whitebat/resources/sass/app.scss，字体文件位于wp-content/themes/whitebat/fonts/fonts.woff，需注意：相对路径的基准是编译后的CSS文件位置，而非SCSS源文件。

• 若编译后的CSS输出到WordPress主题常见的wp-content/themes/whitebat/css/app.css目录，字体相对路径应写为：

@font-face {
  font-family: 'YourFontName';
  src: url('../fonts/fonts.woff') format('woff');
  /* 补充字体权重、样式等属性 */
}

• 最稳妥的方式是使用网站根目录绝对路径，彻底避免层级混乱：

@font-face {
  font-family: 'YourFontName';
  src: url('/wp-content/themes/whitebat/fonts/fonts.woff') format('woff');
  /* 补充字体权重、样式等属性 */
}

2. 检查服务器MIME类型配置 #

服务器未正确配置WOFF字体的MIME类型时，浏览器会拒绝加载资源：

• Apache服务器：在主题根目录的.htaccess文件中添加

AddType application/font-woff .woff
AddType application/font-woff2 .woff2

• Nginx服务器：在站点配置文件中添加

types {
    application/font-woff woff;
    application/font-woff2 woff2;
}

3. 验证字体文件权限 #

确保字体文件fonts.woff的权限设置为644，所在的fonts目录权限为755，保证服务器可正常读取文件。

4. 强制清除浏览器缓存 #

浏览器可能缓存了旧的错误路径，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，重新加载资源。

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