Hugo+GitHub Pages环境下代码标签自定义字体配置失效问题排查

咱们一步步排查你的问题——在Hugo+GitHub Pages环境下自定义字体不生效，通常是路径、CSS优先级或者资源部署的问题，我帮你拆解几个最可能的原因：

首先打开浏览器的开发者工具（按F12），切换到「网络」标签页，刷新页面后搜索input_regular.ttf：

• 如果看到404错误：说明路径完全错了，直接跳到下面的路径修正部分；
• 如果根本看不到这个请求：说明你的CSS规则没被应用，或者@font-face的定义有问题。

Hugo的/static目录下的文件会原封不动复制到生成的网站根目录，所以你的字体最终应该能通过https://你的GitHub Pages域名/font/input_regular.ttf访问到。但这里要注意两个点：

• @font-face的URL是相对CSS文件的位置，还是网站根目录？
  如果你用的是绝对路径（以/开头），比如url("/font/input_regular.ttf")，那这个路径是对的——前提是你的styles.css是放在/static/css/或者根目录，绝对路径会直接指向网站根下的font文件夹。
  但如果你的styles.css是通过Hugo的资源管道（比如放在assets/css/目录，用{{ resources.Get }}引用），那绝对路径可能不生效，得改成相对路径或者用Hugo的资源函数：

  @font-face { 
    font-family: "Input_reg"; 
    src: url("{{ resources.Get "font/input_regular.ttf" | relURL }}") format("truetype"); 
  }
  

• 检查GitHub Pages是否真的部署了字体文件
  去你的GitHub仓库的gh-pages分支（或者你设置的部署分支）看看，有没有font/input_regular.ttf文件？如果没有，可能是.gitignore里不小心排除了static/font/目录，或者Hugo生成时没复制过去——检查你的Hugo配置，有没有禁用静态资源复制？

你的网站其他部分用Source Code Pro，说明主题已经给全局或者pre/code设置了字体。如果主题的CSS文件在你的styles.css之后加载，那主题的规则会覆盖你的。解决方法：

• 提高选择器优先级：把你的选择器写得更具体，比如：

  body pre, body code { 
    font-family: "Input_reg", monospace; 
    font-size: inherit; 
  }
  

  实在不行可以临时用!important（尽量少用，优先调整加载顺序）：

  pre, code { 
    font-family: "Input_reg", monospace !important; 
    font-size: inherit; 
  }
  

• 调整CSS加载顺序：在Hugo的模板里（比如layouts/partials/footer.html）引入你的styles.css，这样它会在主题的CSS之后加载，自然就能覆盖主题的规则。

• 直接在浏览器里输入字体的URL，看能不能正常显示字体预览（Chrome会显示字体的字符），如果显示乱码或报错，说明字体文件损坏，重新上传一份。
• 强制刷新浏览器缓存（按Ctrl+Shift+R），或者在开发者工具里勾选「禁用缓存」再刷新——有时候浏览器会死死缓存旧的CSS或字体文件。

如果你启用了Hugo的资源指纹（fingerprinting）或压缩，可能会影响字体路径。打开你的config.toml，看看有没有类似的配置：

[params]
  assets = { disableFingerprinting = false }

如果启用了指纹，那必须用Hugo的资源函数来引用字体，否则生成的路径会不对。

先从「网络」面板检查字体请求开始，这是最快找到问题的方法！

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