第一步:创建自定义 CSS 文件

首先在你的 Zola 博客项目的 static/css 目录下,新建 custom.css 文件,最终文件路径如下:

static
├─ css 
│  └─ custom.css

第二步:添加字体配置代码

在新建的 custom.css 文件中,复制粘贴以下内容:

补充说明:文中用到的 https://cdn.cxcare.top 是个人搭建的公开加速站点,内置常用字体与图标资源,用于博客加速。若你有自有字体资源,也可将代码中的字体链接替换为自己的资源地址或者将字体文件放到 public 文件夹引用。

@import url('https://cdn.cxcare.top/fonts/DingTalk_JinBuTi/result.css');

/* 全局字体 - 应用于整个站点页面 */
body {
  font-family: 'DingTalk JinBuTi' !important;
}

/* 站点名称字体 - 单独指定站点标题样式 */
#site-name {
  font-family: "DingTalk JinBuTi";
}