最近发现我的Hugo网站，在大陆访问有时候打开很慢，F12大法排查发现是打开网站有个请求到fonts.googleapis.com，是Hugo的主题会请求一些字体和图标。由于众所周知的原因，这个请求会严重影响加载速度，页面中的图标字体可能还无法显示。

解决这个问题，基本有2个思路，一个是找到google的代替网站，一个是把需要请求的内容放在网站本地。

1. 找到html

以我的Hugo主题Diary为例，在\themes\diary\layouts\partials\head.html里找到

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Material+Icons">

2. 镜像网站代替

网上可以搜到很多国内google fonts的加速镜像，这种方法需要镜像网站本身要比较可靠，这里以loli.net为例。

把原内容

href="https://fonts.googleapis.com/css?family=Material+Icons">

修改为

href="https://fonts.loli.net/css?family=Material+Icons">

如果想用hugo的参数来控制使用google还是镜像网站，可以现在toml配置文件增加一个参数replaceGoogleFont。

[params]
replaceGoogleFont = true

然后在head.html里添加参数判断

{{ if .Site.Params.replaceGoogleFont }}
<link rel="stylesheet"
          href="https://fonts.loli.net/css?family=Material+Icons">
{{ else }}
<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Material+Icons">
{{ end }}

修改完测试后，正确请求了loli.net。

3. 本地文件

后来我发现loli.net的请求也不快，有时候要1秒多才返回。要更稳定的方法可以把请求内容下载到本地，不再需要发起网络请求。

先保存请求的css返回内容

curl https://fonts.googleapis.com/css?family=Material+Icons

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

将内容保存为css.css文件。发现文件内容里还有个url请求，把这个ttf字体文件也单独下载下来，保存为flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf。

修改css.css的内容，将原内容

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}

修改为

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}

然后将css.css和flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf放在同一个文件夹里，这里放在/static/googlefont/下。

最后修改\themes\diary\layouts\partials\head.html文件。

把原内容

href="https://fonts.googleapis.com/css?family=Material+Icons">

修改为

href="/googlefont/css.css?family=Material+Icons">

修改完后测试正常。

Last modified on 2023-11-10