自定义字体

主题使用了以下五个 CSS Variablesopen in new window 来定义字体：

:root{
	--sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
	--zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";

	--base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family);
	--code-font-family: Menlo, Monaco, Consolas, "Courier New";

	--article-font-family: var(--base-font-family);
}

默认加载open in new window了 Lato 这个英文字体。中文字体的定义在 --zh-font-family 这个变量里。

可以在页面头部 / 底部插入 <style> 标签来覆盖这些变量，参考「修改主题open in new window」

例子：给文章加上思源宋体

我博客文章使用的是思源宋体open in new window（没有内置在主题里）。

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

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

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