WordPress博客分页页面自定义字体加载失败问题求助

嘿，这个问题我之前也踩过坑！核心原因就是相对路径在分页页面的层级变了，导致字体文件的请求路径出错。

问题拆解 #

你首页的路径是http://localhost/wordpress/home/，用../fonts/的时候，浏览器会解析成http://localhost/wordpress/fonts/，这正好是你字体文件的真实位置，所以显示正常。但到了分页页面http://localhost/wordpress/home/page/2/，../fonts/就会被解析成http://localhost/wordpress/home/fonts/——这个路径根本不存在，自然就404了。

靠谱的解决方案 #

给你几个按优先级排序的解决办法：

1. 直接用绝对路径（最省心） #

把CSS里的相对路径改成从站点根目录出发的绝对路径，不管页面在哪个层级，都能精准找到字体：

@font-face { 
  font-family: gilroylight; 
  src: url("/wordpress/fonts/Gilroy-Light.ttf"); 
} 
@font-face { 
  font-family: gilroysemibold; 
  src: url("/wordpress/fonts/Gilroy-Semibold.ttf"); 
} 
@font-face { 
  font-family: keepcalm; 
  src: url("/wordpress/fonts/KEEPCALM-MEDIUM_0.TTF"); 
}

注意开头的/代表站点根目录，你要确认字体文件确实在/wordpress/fonts/这个文件夹里哦。

2. 用WordPress内置函数（主题开发首选） #

如果你的CSS是放在主题文件里，或者可以通过PHP输出，用WordPress的get_template_directory_uri()函数来自动获取绝对路径，以后换域名或者迁移站点都不用手动改路径：

<style>
@font-face { 
  font-family: gilroylight; 
  src: url("<?php echo get_template_directory_uri(); ?>/fonts/Gilroy-Light.ttf"); 
} 
@font-face { 
  font-family: gilroysemibold; 
  src: url("<?php echo get_template_directory_uri(); ?>/fonts/Gilroy-Semibold.ttf"); 
} 
@font-face { 
  font-family: keepcalm; 
  src: url("<?php echo get_template_directory_uri(); ?>/fonts/KEEPCALM-MEDIUM_0.TTF"); 
}
</style>

记得把字体文件放到当前主题文件夹下的fonts目录里，这个函数会自动输出主题目录的完整URL。

3. .htaccess重写（应急用，不推荐） #

要是暂时没法改CSS，可以通过Apache的.htaccess文件把错误的请求跳转到正确路径：

RewriteEngine On
RewriteRule ^home/page/fonts/(.*)$ /wordpress/fonts/$1 [L,R=301]

不过这只是临时解决，后续页面结构变化可能又出问题，还是优先前两种方法。

验证步骤 #

改完之后刷新分页页面，按F12打开控制台，切换到Network标签，找字体文件的请求，看看状态码是不是200，字体能不能正常显示就ok了。

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