Hexo|用Google Fonts为Hexo博客替换字体

1. 在 Google Fonts 挑选字体

首先访问 Google Fonts，这里提供了数百种免费字体供您选择。

筛选字体

  • 点击左侧的 Filters 按钮，您可以根据不同条件筛选字体
  • 如果需要支持日文字符的字体，可以在语言筛选中选择 Japanese

字体筛选界面

获取字体代码

  1. 找到喜欢的字体后，点击字体卡片进入详情页
  2. 点击右上角的 “Get Font” 按钮将其添加到”购物车”

获取字体

  1. 在右侧弹出的面板中，切换到 Embed 选项卡
  2. 复制提供的嵌入代码

嵌入代码

2. 修改主题配置文件

添加字体链接

在 Hexo 主题的配置文件（通常是 _config.yml 或主题的配置文件）中，找到 inject 部分，将复制的代码粘贴到 head 项下：

1
2
3
4
5
6
inject:
  head:
    # 自定义 CSS 和字体链接
    - <link rel="preconnect" href="https://fonts.googleapis.com">
    - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    - <link href="https://fonts.googleapis.com/css2?family=Yuji+Mai&display=swap" rel="stylesheet">

重要提示：YAML 对缩进要求严格，请确保每行开头的空格数一致。

配置博客标题字体

找到博客标题字体设置部分，将 Google Fonts 的字体名称添加到字体列表的最前面：

1
2
3
4
5
# 博客标题字体设置
# 影响左上角网站名称和主页居中显示的网站名称
blog_title_font:
  font_link:
  font-family: Yuji Mai, PingFang SC, Hiragino Sans GB, Microsoft JhengHei, Microsoft YaHei, sans-serif

注意事项：

  • 我使用的是 “Yuji Mai” 字体，您可以选择自己喜欢的任何字体
  • 字体栈的顺序很重要：浏览器会优先使用列表中的第一个可用字体
  • 建议保留系统字体作为备选，确保在不同设备上都能正常显示

3. 本地预览效果

保存配置文件后，在终端执行以下命令清理缓存并启动本地服务器：

1
hexo cl; hexo s;

访问 http://localhost:4000 查看字体更改效果：

网站标题效果

如果标题字体已更新为新选择的字体，说明配置成功。

4. 部署到线上

确认本地效果满意后，执行以下命令生成静态文件并部署到线上：

1
hexo cl; hexo g; hexo d

扩展应用与建议

应用到其他元素

同样的方法也可以用于修改其他文本元素的字体：

  • 正文字体 (global_font)
  • 代码块字体 (code_font)
  • 侧边栏字体等

性能优化建议

  1. 仅加载需要的字重：在 Google Fonts 中只选择实际使用的字重（如 Regular 400、Bold 700）
  2. 使用 font-display: swap：确保文本在字体加载期间仍然可见
  3. 考虑中文字体体积：中文字体文件较大，建议仅用于标题或少量文字

故障排除

  • 如果字体未生效，检查浏览器开发者工具的 Network 选项卡，确认字体文件是否成功加载
  • 确认字体名称拼写完全正确
  • 清除浏览器缓存后重新加载页面

结语

通过简单的四步操作，您就能为博客换上独具特色的字体。合理运用字体不仅能提升博客的视觉吸引力，还能增强阅读体验和品牌识别度。

提示：您可以在 Google Fonts 同时添加多个字体，分别应用于标题、正文等不同元素，创造更丰富的版面层次感。

示例中使用的是 Yuji Mai 字体，这是一款优雅的日文毛笔字体，适合用于标题展示。您可以根据自己的喜好选择其他字体。