本教程以下列字体为例：
全局字体：LXGW WenKai (霞鹜文楷)
代码字体：JetBrains Mono
一、CDN引入字体资源
1.打开_config.butterfly.yml文件，找到inject部分，添加以下代码：
1
2
3
4
| inject:
head:
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css">
- <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/jetbrains-mono">
|
2.在同一个配置文件中，找到font部分，修改为：
1
2
3
4
5
| font:
global_font_size: 16px
code_font_size: 14px
font_family: '"LXGW WenKai Screen", sans-serif'
code_font_family: '"JetBrains Mono", monospace'
|
注意事项
1.如遇字体显示异常，请检查 CDN 链接是否有效
2.首次应用较慢很正常
二、本地应用字体
1.下载LXGWWenKai-Regular.ttf，放到 themes\butterfly\source\fonts
2.在fonts里面创建font.css文件，里面改成这样
1
2
3
4
5
| @font-face {
font-family: 'LXGW WenKai Screen';
font-display: swap;
src: url('/fonts/LXGWWenKai-Regular.ttf') format("truetype");
}
|
2.打开_config.butterfly.yml文件，找到inject部分，添加以下代码：
1
2
3
| inject:
head:
- <link rel="stylesheet" href="fonts/font.css">
|
2.在同一个配置文件中，找到font部分，修改为：
1
2
3
4
5
| font:
global_font_size: 16px
code_font_size: 14px
font_family: '"LXGW WenKai Screen", sans-serif'
code_font_family: '"LXGW WenKai Screen", sans-serif'
|
注意事项
1.如遇字体显示异常，请检查路径是否正确
2.首次应用较慢很正常
3.速度应该没CDN快
4.站长目前还不会本地修改代码字体 JetBrains Mono
微信
