PaperMod主题更换字体

场景：

Hugo + PaperMod 搭建的github静态博客网页，需要更换字体

目标字体：

https://font.subf.dev/    英文确实好看，但是其汉字与英文字体风格迥异，搭在一起过于突兀

下载了MapleMono-Light.woff2文件_{（chatgpt更推荐该字体扩展格式.woff2）}

https://fonts.google.com/noto/specimen/Noto+Serif+SC/glyphs

推荐！！！某种程度上有黑体那样的明晰易辨，也有书法上的美感（汉字视角观之），英文美感稍逊一筹，二者风格均为俊秀隽永，同时出现依旧协调素雅，好看~

 

修改：

 

修改主题对应文件extend_head.html，添加一句应用上述static目录下的css

{{- /* 1. 预连接：不仅解析 DNS，还提前完成 TCP/TLS 握手 */ -}}
<link rel="preconnect" href="https://fonts.googlefonts.cn">
<link rel="dns-prefetch" href="https://fonts.googlefonts.cn">

{{- /* 2. 引入样式：确保域名统一 */ -}}
<link rel="stylesheet" href="https://fonts.googlefonts.cn/css2?family=Noto+Serif+SC:wght@500&display=swap">

<style>
  :root {
    --main-font: 'Noto Serif SC', serif;
  }

  body {
    font-family: var(--main-font);
  }
</style>

然后重新构建部署即可。

• Preconnect 优势：preconnect ，它会提前完成安全协议的校验。这对于中文字体这种需要频繁请求多个小切片的场景非常有帮助。

• 负载均衡：googlefonts.cn 在国内有不错的节点分布，即便你开了代理，由于它属于主流镜像站，代理节点的 CDN 缓存命中率通常也很高。

 

效果展示：

Ashe's Blog

 

思路：

在主题中渲染该字体 （需要你上传至github的主题是可修改的，即本地git删除了PaperMod目录下的.git，否则你在github中主题文件夹是空的，始终指向源主题github地址）