记录：解决了Google Fonts加载问题

Hexo NexT 主题添加自定义字体

博客字体的处理从线上到站点本地

前言：所用字体

本站点所用中文字体：思源宋体

本站点所用英文字体：Garamond

曾经：使用方式

首先访问Google Fonts官网，官网搜索 Noto Serif SC，点 + 号选择，选择好后底部会弹出一个提示框，里面有使用说明。还可以点击提示框中的 CUSTOMIZE 定制要加载的字重与语言。

这里我们选择 regular 400 , medium 500 (非必选) , bold 700

之后，点击 EMBED，复制生成的代码，添加到博客的 <head> 标签内，并修改博客的相关 CSS 样式，指定 font-family 和 font-weight。

最后，考虑到宋体的笔画要比黑体细，因此建议将字体的颜色加深，比如修改为 #333，以达到较好的阅读效果。

对于中文，思源宋体已经非常美观了，但对于英文.

在已选择 Noto Serif SC 的基础上，继续搜索 EB Garamond，点 + 号选择，然后 CUSTOMIZE 勾选四个：

regular 400
regular 400 Italic
bold 700
bold 700 Italic

同样，复制生成的代码，添加到博客的 <head> 标签内，然后需修改 font-family：

1	font-family: 'EB Garamond', 'Noto Serif SC', serif;

在配置文件按如下步骤操作：

_config.yml

# 文件位置：~/blog/themes/next/_config.yml

font:
- enable: false
+ enable: true

  # Global font settings used for all elements in <body>.
  global:
    external: true
+   family: EB Garamond

base.styl

# 文件位置：~/blog/themes/next/source/css/_variables/base.styl

// Font families.
-$font-family-chinese      = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese      = "Noto Serif SC"

external-fonts.swig

1	文件位置：~/blog/themes/next/layout/_partials/head/external-fonts.swig

将这个文件的全部内容直接替换为 Google Fonts 网站生成的 <link> 代码，然后可以将 googleapis.com 修改为 loli.net。

custom.styl

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

.post-body {
    color: #333;
}

过去：处理方式

在部署完上述的配置后我们可以发现：

访问站点刷新页面，查看网络请求，会发现站点默认引用了 fonts.googleapis.com 下的一个字体样式文件，也就是我们默认会通过Google Fonts官网进行资源的下载，而这样的访问速度是不稳定的，连接并不会每次都迅速稳定，有时甚至加载不出来。

过去的处理方式的话，是利用_config.yml里面font部分的host字段，通过加上谷歌字体的镜像网站来加快访问速度，但是镜像网站其实也面临着一个不稳定的问题，前阵子就是遇到了这个问题，所以才有了下面的解决方案

现在：解决方式

通过将字体下载到站点中，再在站点中使用绝对路径的方式引用字体

文件内容是这样的：https://images.linjiahong.top/font-face

复制该文件内容，添加到 themes/next/source/css/_custom/custom.styl 文件里，其实这里就会发现，这个样式文件通过 URL 引用了真正的外部字体文件。

说明：上述为本站点原先引用的 font配置文件，即从Google Fonts所导出的配置，准确来说就是默认在线会去访问的文件

然后再把这个样式描述文件中的字体一一下载到本地，并拷贝到 source\fonts 目录下，fonts 目录如果不存在则新建。这样站点本地就有这些字体了。

考虑到文件过多，这里我采取的方式是IDM批量获取链接

再修改上述拷贝的字体描述文件，将外部 URL 替换成本地绝对路径，即：https://gstatic.loli.net/s/ebgaramond/v14替换成/fonts

最后修改主题配置文件的 font 部分。因为字体站点本身已经有了，所以不使用 Google Fonts 的在线字体，enable 设置为 false

再刷新页面，会发现已经请求到站点本身的字体文件了。