本来在构建博客的时候想给博客换个字体，官方文档根本没说详细

先说我的需求：

博客文章全局使用LXGWNeoXiHeiPlus
代码中中文使用LXGWNeoXiHeiPlus，英文使用JetBrainsMonoNL

摸索了4个小时，得出结论：
1，Butterfly根本不支持本地字体，或者我没有找到任何方式来让butterfly挂载本地字体
2，挂载字体不仅需要在butterfly下themes\butterfly\_config.yml修改: 

1
2
3
4
5
6
7
8
9
10
11
12
# 全局字体设置
# 除非您知道它们的工作原理，否则不要修改以下设置
font:
  global-font-size:
  code-font-size:
  font-family: '"LXGWNeoXiHeiPlus", sans-serif'
  code-font-family: '"JetBrainsMonoNL", "LXGWNeoXiHeiPlus", monospace'

# 网站标题和副标题的字体设置
blog_title_font:
  font_link:
  font-family: '"LXGWNeoXiHeiPlus", sans-serif'

还需要在source\fonts\fonts.css中添加： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
  font-family: 'LXGWNeoXiHeiPlus';
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/Mirrorium227/MirroriumCDN@main/LXGWNeoXiHeiPlus.ttf');
}

@font-face {
  font-family: 'JetBrainsMonoNL';
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/Mirrorium227/MirroriumCDN@main/JetBrainsMonoNL-Regular.ttf');
}

body {
    font-family: 'LXGWNeoXiHeiPlus','JetBrainsMonoNL';
}

我直接被卡在这里半天，最后发现还需要再写一行body来应用整个font family
这步需要把自己需要的字体整理成外链，我直接上传到github然后挂jsdelivr CDN
还需要在custom.css中添加：

1
2
3
4
5
6
7
8
/* 代码块字体 - 英文用 JetBrainsMonoNL，中文 fallback 到 LXGWNeoXiHeiPlus */
.container pre,
.container code,
#article-container pre,
#article-container code,
pre, code {
  font-family: 'JetBrainsMonoNL', 'LXGWNeoXiHeiPlus', monospace !important;
}

必须要加!imporant

原谅我没学过前端…
这里必须鸣谢这两篇博客，没这两篇我估计还得被卡更久：

https://www.smathsp.com/post/202504272045.html
https://jingzhi1208.github.io/2021/11/26/hexo-butterfly%E4%B8%BB%E9%A2%98%E4%B8%8B%E6%9B%B4%E6%8D%A2%E5%AD%97%E4%BD%93/