本教程适用butterfly4.5.0版本，邻近版本可能会兼容性出错
为了保证稳定性，本次修改采用外挂css的方式实现

首先，在\butterfly\source\css\文件夹下,该文件夹用于存放主题的css样式，再新建一个名为font.css，在里面写入以下代码：

1
2
3
4
5
6
7
@font-face {
    font-family: 'ZCOOLKuaiLe-Regular'; 
    /* 修改为自定义字体 */
    font-display: swap;
    src: url('../css/ZCOOLKuaiLe-Regular.ttf') format("truetype");
    /* 导入字体所在路径，请使用相对路径，由于示例字体为.ttf，因此格式为"truetype" */
  }

把字体文件放在css文件同一文件夹下，注意文件名与css文件内引用文件同名。

然后，在主题配置文件_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的font.css文件

1
- <link rel="stylesheet" href="/css/font.css" >

修改博客字体配置项

1
2
3
4
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link: Michael parnna
  font-family: ZCOOLKuaiLe-Regular

请注意！大多数字体自定义会出现因为字体不全而在部分页面渲染出错的问题，出于兼容性考虑，请添加常用字体，如 ‘PingFang SC’, ‘Hiragino Sans GB’, ‘Microsoft JhengHei’, ‘Microsoft YaHei’, sans-serif, Titillium Web等常用字体。
以上方法用于修改网站标题字体，如果要修改全局字体，请继续：

1
2
3
4
5
6
7
8
9
10
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  # 全局字体大小
  code-font-size:
  # 全局代码字体大小
  font-family: ZCOOLKuaiLe-Regular,'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif, Titillium Web
  # 全局字体格式
  code-font-family:
  # 全局代码字体格式

请注意！不建议全局替换字体！可能会渲染出错。