如何在WordPress中应用自定义字体？Bank Gothic Light BT字体配置疑问

看起来你已经走对了大半流程——元素检查里能看到h1带了目标字体属性，说明CSS选择器是生效的，大概率是字体文件加载环节出了问题。我给你梳理几个排查和解决的步骤：

1. 先把字体路径改稳 #

你当前用的是相对路径url('fonts/TT0589M_.woff')，这个路径是相对于你的CSS文件位置解析的：

• 如果你的主CSS文件是wp-content/themes/alexia/style.css，那这个路径没问题；
• 要是CSS文件在子文件夹（比如alexia/css/main.css），就得改成../fonts/TT0589M_.woff；
• 最稳妥的是直接用绝对路径，彻底避免路径混乱：

  @font-face { 
    font-family: 'Bank Gothic Light BT'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Bank Gothic Light BT'), url('/wp-content/themes/alexia/fonts/TT0589M_.woff') format('woff'); 
  }
  

2. 检查文件权限和可访问性 #

服务器权限不对会直接让字体文件加载失败：

• 给fonts文件夹设755权限，字体文件设644权限（通过FTP或主机控制面板就能改）；
• 直接在浏览器地址栏输入字体的完整URL（比如https://你的域名/wp-content/themes/alexia/fonts/TT0589M_.woff），如果能下载或预览，说明文件能正常访问；要是跳404，那就是路径或权限的锅。

3. 强制浏览器清缓存 #

浏览器缓存真的是很多前端问题的元凶，哪怕你改了代码，它可能还在加载旧文件：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面；
• 或者给CSS文件加个版本号，比如把引用改成style.css?v=20240520，让浏览器识别为新文件。

4. 补全细节增强兼容性 #

• 给字体加个 fallback 选项，避免加载失败时页面字体乱掉：

  #Subheader .container h1{
    font-family:'Bank Gothic Light BT', sans-serif;
  }
  

• 确认font-weight匹配：你在@font-face里设的是normal，如果h1默认是加粗状态，可能会 fallback 到其他字体，你可以把font-weight改成300（Light字体对应的标准权重），并在h1样式里同步设置。

5. 排查主题样式覆盖 #

有些主题会用更具体的CSS选择器设置字体，可能把你的规则覆盖了。你可以临时加个!important测试：

#Subheader .container h1{
  font-family:'Bank Gothic Light BT', sans-serif !important;
}

如果生效了，说明你的选择器优先级不够，把选择器改得更具体就行（比如加上body前缀：body #Subheader .container h1），尽量别一直用!important。

按这些步骤走下来，应该能搞定字体不显示的问题。

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