AI正在绞尽脑汁想思路ING···
BiのAI摘要
HunYuan-Lite

今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示

2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。

选择字体

首先在网上查找自己喜欢的字体，这里有一个网站

🪧引用站外地址，不保证站点的可用性和安全性
中文开源字体集 Open Source Fonts Collection for Chinese
开源字体

找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站：

🪧引用站外地址，不保证站点的可用性和安全性
转换网站
ttf2woff2

利用这个网站把下载的ttf字体文件转换成woff2格式。

添加字体

新建一个css文件

1
2
3
4
5
@font-face {
  font-family: 'CascadiaCodePL';
  font-display: swap;
  src: url('/butterflyChange/fonts/font.woff2') format("woff2");
}

其中 font.woff2改成自己的文件名。
其他字体格式参考

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
   font-family: 'webfont';
   font-display: swap;
   src: url('.eot');  /*IE9*/
   src: url('.eot') format('embedded-opentype'),  /* IE6-IE8 */
        url('.woff2') format('woff2'),
        url('.woff') format('woff'),  /*chrome、firefox */
        url('.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('.svg') format('svg');  /* iOS 4.1- */
}```
然后在`_config.butterfly.yml`里面引用这个css
```yml
- <link rel="stylesheet" href="/css/font.css">

在主题文件的font配置区域修改字体：

1
2
3
4
5
font:
  global_font_size:  110%
  code_font_size: 100%
  font_family:  # ，全局字体，不带后缀名
  code_font_family: # 这是代码使用的字体

参考链接

🪧引用站外地址，不保证站点的可用性和安全性
Ordis的博客
ordis