Hugo自定义全局字体

Fri, 29 Jul 2022 14:28:50 +0800

本文采用的是思源黑体，可以在Google Font查询更换其他字体，详细可查看Google Fonts API。

字体样式：https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap
字体名：Noto Sans SC，即上方链接中family=后的字符串，+替换为空格

在站点根目录新建文件 ./layouts/partials/head/custom.html，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<style>
 :root {
 --article-font-family: "Noto Sans SC", var(--base-font-family);
 }
</style>

<script>
 (function () {
 const customFont = document.createElement('link');
 customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap";
 customFont.type = "text/css";
 customFont.rel = "stylesheet";
 document.head.appendChild(customFont);
 }());
</script>

Font on 修远

Hugo自定义全局字体