WordPress站点Celtic字体加载失败原因排查及解决咨询

第一步：修复路径配置错误 #

你当前@font-face规则中存在明显的路径错误：truetype格式字体的URL中多了一个多余的斜杠：
url("https://xxxx//wp-content/themes/responsive-childtheme-master/fonts/Celtic.ttf")
建议将所有字体路径统一调整为站点根目录相对路径，避免域名变动、多域名访问导致的路径匹配问题，修改后规则参考：

@font-face {
    font-family:"Celtic (Plain):001.001";
    src:url("/wp-content/themes/responsive-childtheme-master/fonts/Celtic.eot?") format("eot"),
    url("/wp-content/themes/responsive-childtheme-master/fonts/Celtic.woff") format("woff"),
    url("/wp-content/themes/responsive-childtheme-master/fonts/Celtic.ttf") format("truetype"),
    url("/wp-content/themes/responsive-childtheme-master/fonts/Celtic.svg#Celtic") format("svg");
    font-weight:normal;
    font-style:normal;
}

修改后先清理WordPress站点缓存、浏览器缓存测试是否恢复。

第二步：排查CORS跨域配置问题 #

如果路径修复后仍然报错，按照你使用的服务器环境配置跨域规则即可：

• Apache环境：在站点根目录的.htaccess文件中添加如下配置：

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

若需要限制仅本站点访问，将*替换为你的站点域名即可。

• Nginx环境：在站点的Nginx配置文件中添加如下规则，修改后重启Nginx生效：

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

• 若站点使用了CDN服务：前往CDN控制台配置字体文件的跨域访问规则，配置完成后清理CDN缓存再测试。

验证方式 #

打开浏览器控制台的网络面板，筛选字体文件请求，若返回状态码为200且样式生效即为修复完成。

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