本教程以下列字体为例：

  • 全局字体：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.首次应用较慢很正常

二、本地应用字体

🪧引用站外地址，不保证站点的可用性和安全性
LXGW WenKai(霞鹜文楷)Github仓库
github

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快
站长目前还不会本地修改代码字体 JetBrains Mono