阅前提示

本文方法已知适用于solitude主题、butterfly及其二次开发主题，不保证其他主题可用性，其他主题请自行判断

请务必在选择使用字体前确认该字体已开源且可供个人使用/商用，如因下载使用非开源字体、商用已标明“不可商用”的字体等原因导致的侵权赔偿问题我方概不负责

自定义字体步骤

以下教程请根据实际情况选择

配置css文件

在custom.css文件内新增以下内容

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

在博客目录/source/css文件夹下新增custom.css文件，如source目录下无css文件夹请先新增文件夹

在文件内写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}
上述属性定义

在主题配置文件中引入字体

在主题配置文件中找到字体引入部分，此处以_confug.solitude.yml与_config.butterfly.yml为例

在对应配置的最前面写上你的自定义字体名称

1
2
3
4
5
font:
  font-size: 16px
  code-font-size: 16px
  font-family: '自定义字体名称,PingFang SC,Hiragino Sans GB,Microsoft YaHei'
  code-font-family: 'Douyin,monospace, monospace'
1
2
3
4
5
6
7
8
9
10
11
12
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: '15px'
  code-font-size: '14px'
  font-family: 自定义字体名称, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  code-font-family: 自定义字体名称, Consolas, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: 
  font-family: 自定义字体名称, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif

在主题配置文件中引入css文件

此处以solitude主题配置文件为例，其他主题请自行适配

如此前已引入该文件则无需重新引入

1
2
3
extends:
  head: # 在head中插入 / Insert in head
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

本地启动hexo进行预览

1
hexo cl; hexo s

其它

如果您找到了他人公开的在线字体链接，可将该链接写入css文件中：

1
2
/* 字体文件地址(相对或者绝对路径都可以) */
src:url()

的括号内，随后重新部署即可查看

额外教程

因为很多站长（包括我自己）都是把hexo博客托管在vercel的，如果使用本地引入字体文件的方式可能会导致字体文件的路径流量激增，严重的甚至还可能导致vercel服务超量封号。因此我们还可以考虑github＋cloudflare pages的形式引入字体文件。具体操作方式如下：

  1. 在github新建一个仓库，起一个喜欢的、合适的名字
  2. 将字体文件上传至对应仓库（因该仓库仅作加载字体用途，为了不使用git上传可在创建时勾选“创建一个readme.md文件”）
  3. 在cloudflare pages处新建项目，找到自己对应的github仓库
  4. 无需配置任何环境变量，直接确认部署
  5. 访问https://默认分配域名/文件路径/字体文件名.文件格式链接，如链接正确则可能会触发自动下载
  6. 将对应链接写入css文件的url引入括号内
  7. 部署，查看效果
注意事项