如何在 WordPress 本机托管 Google Fonts 字体？

选择优质的 WordPress 主机 和使用优质 速度优化插件，是网站速度明显提升的两大关键。

但要优化网站速度，还是有许多细节需处理的，其中一点就是字体的优化。

这篇文章，会分享如何用手动方式在本地托管 Google Fonts，过程会有点繁琐，会建议有些 WordPress 网站操作经验的站长，再来使用。

如果想省事一点会推荐用 OMGF 插件，也能用最短的时间完成 Google Fonts 本机托管，唯一缺点就是会多安装一个插件就是了（但这也是有经验的站长，可能会想手动处理的原因）。

好，我们来看一下本文章节。

• 1. 本机托管 Google Fonts 的优点？
• 2. 下载 Google 字体
• 3. 使用工具转换成 Web 字体
• 4. 字体上传到 WordPress 网站
• 5. 添加字体到 CSS 文档&套用至网站
• 6. 禁止主题或插件的 Google Fonts 加载
• 7. 重新测试网站
• 常见问题
• WordPress 学习资源

如何在本机托管 Google 字体，视频学习

---

1. 本机托管 Google Fonts 的优点？

在优化网站的过程，我们希望尽量降低向远程请求资源的数量，这样也代表能用更快的速度，把网页呈现在访客面前。

常用的速度测试工具，像是 PageSpeed Insights、Gtmetrix ..，其中有几项的优化建议，就是针对 Fonts（字体）的优化改良。

因为在网站上使用 Google Fonts（或是任一种第三方字体），都会向远程发送下载字体的 DNS 请求。

所以当你用速度测试工具时，可能会看到、 这两种的请求域，而文字的下载数据成本其实很高（网站如果使用多种字体，体积更大）。fonts.googleapis.comfonts.gstatic.com

所以如果对网站速度有要求，就可以下载 Google Fonts 并放在本地主机托管，就不用每次都要去远程请求数据。 如此一来，就能优化网站字体的读取速度啦！

---

2. 下载 Google 字体

Google Fonts 是 Google 的免费开源字体，里面的字体都能免费使用，有关于中文字体部分，也有许多好看的类型，可以下载应用。

前往 Google Fonts，然后搜索你想使用的字体并点击，这里我用 Noto Sans TC（思源黑体繁中版）进行示范。

进入后点选 Download family，开始下载字体。

备注：安装多种字体等于更多的网站请求，建议只挑选真正会用到文字即可）。

下载完成后是一个压缩文件，可以先解压缩下一章节会用到。

---

3. 使用工具转换成 Web 字体

前往 Transfonter，这是一款在线字体转化工具，可把 Google Fonts 的字体文档，转换成像是 WOFF、WOFF2、TTF、EOT 等 .. 格式。

点Add Fonts上传刚从Google Fonts下载的字体，有关字体粗细部分，建议选择会用到即可（像是我就只有把Regular 400/Bold 700应用在网站上，可降低网站的请求次数）。

转换格式确认是 WOFF、WOFF2 这两种，因为这两种就能支持大多数的浏览器，除非你有特别需求再勾选别的（同样是为了降低网站的请求次数）。

其他的选项就用默认值即可，没问题后点 Convert 开始转换（参考上图示例）。

转换完成后，点选 Download 下载。

下载后的文档可以先解压缩，等下会用到。

文件夹里面有 4 个等等会用到的文档，分别是 Regular（一般）的 woff / woff2 格式和 Blod（粗体）的 woff / woff2 格式。

备注：如果用 PageSpeed Insights 测试后，出现本机端文字过大的状况，可改用 fontsquirrel 进行格式转换（文字体积可能会有效压缩的比较小），操作流程跟上面差不多。

---

4. 字体上传到 WordPress 网站

这章节要开始把刚转换好的 Google 字体，上传到我们的 WordPress 网站啦！

上传字体方式通常有两种，第一种是使用主机商提供的文档管理员工具（不一定每家都有），是图形化的界面会比较容易上手。 第二种是用 FTP 软件工具，连接到主机后上传字体文档。

上传路径建议放在内，像是我有建立一个文件夹，这里面就是专门放网站文字的，比较不会和其他东西混在一起。wp-content/uploadsfonts

所以字体的完整路径，通常会像是（可以先照我的路径摆放，等下流程比较不会出错）：

• https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff
• https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff2
• https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff
• https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff2

记得把 yourdomain.com 换成自己的域名，如果域有开SSL凭证就输入 https（没有的话就输入 http）。

如果字体的上传路径是正确的，此时访问上面的网址应该可以直接把字体下载起来，那这就代表你的字体已经放置在网站中啰：）

接下来，我们需要做些 CSS 样式设定，让网站能够顺利吃到字体样式。

---

5. 添加字体到 CSS 文档&套用至网站

字体上传到网站后，接着需要到自己使用的 WordPress 主题中，把刚刚上传的字体用 CSS 方式给网站使用。

通常有两种方法可以添加 CSS 程序码，第一种是使用自订 CSS，第二种是用主题的 style.css（下面我会分别示范，记得方法 2 选 1 使用即可唷）。

方法1：使用自订 CSS

首先示范第一种方法，前往外观>自订。

进入后，点击「附加的 CSS 」，里面就是贴上 CSS 程序码的地方。

以下是用测试网站的程序码分享，整段程序码意思大概是，先读取放置在本机的字体路径，然后套用到网站内容&网站标题上。

看不懂也没关系，记得把内容有「yourdomain.com 」的文本，改为自己的域名，然后确认读取字体的 URL 链接是正确的，没问题后就复制到字段中，完成后记得储存唷！

@font-face {
  font-family: 'NotoSansTC-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff2') format('woff2'),
       url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansTC-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff2') format('woff2'),
       url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff') format('woff');
}

body, p {
  font-family: 'NotoSansTC-Regular', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'NotoSansTC-Bold', Arial, sans-serif;
}

完成后大概会长下图这样。

这就是使用附加的 CSS 粘贴 CSS 程序码的方式，这是 WordPress 默认的功能，应该每个网站都找得到。

方法2：在主题内，添加 CSS 

第二种方法是，可以贴到主题的 style.css 文档中（但有时候不同主题的 CSS 文档命名不太一样，所以可能要自己找一下）。

以我自己是用 Astra 主题 为例，我是套用 Astra 的子主题（以防未来更新主题，设定的程序被洗掉），就会在 WordPress 外观 > 主题主题编辑器 > style.css 加上字体的 CSS 。

测试是否使用本机路径，读取 Google 字体

字体的 CSS贴上完成后，前往 WordPress 网站前台刷新页面（如果有网页快取，记得清除才能读取到最新的页面）。

然后开启浏览器的开发者工具（使用 Chome 的话，对着网页按右键 > 检查，就会出现了）。

备注：记得要在有使用标题（例如 h1、h2 标签）& 内文（例如 p 标签）的网站页面，开启开发者工具唷。

然后切换到 Network > All > 搜索 font，就会看到字体的相关请求，如果刚上面的流程都执行顺利的话，这里就会看到本机字体的请求结果。

点击项目会显示请求的相关讯息，可确认是否从本地路径读取字体，如果路径一致，就恭喜你已经完成本地托管 Google Fonts 字体啦！

备注：如果还是读取到远端的 Google字体，有时候可能是没清快取（不论是浏览器 or 服务器），所以还是读到旧的程序。 记得清一下快取再回来测试，看是否有成功：）

---

6. 禁止主题或插件的 Google Fonts 加载

经过上面的教程流程，我们已经大幅减少了从远程下载 Google Fonts 的请求次数。

但有些主题主题或网站插件，默认会抓取远程的 Google Fonts，所以当用开发者工具检查时，可能还会发现还是有一些资源，是从远程抓取的。

备注：所以如果你还是有发现，有字体资源是向远程请求的，就能参考这章节继续学习，否则的话就直接略过即可。

因为 WordPress 主题&插件非常多种，每一种禁止加载字体的方法也不太一样。

是有种方法可用函数的方式处理，但就是要先找到主题 or 插件的字体 ID，但想说每个软件的放置位置又不同 ..，就不多提了怕造成大家的混乱。

所以呢，我只能就我知道的进行分享了（Astra 主题+Elementor 页面编辑器）。

Astra 的 Google Fonts 字体禁用

add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});

Elementor 的 Google Fonts 字体禁用

add_filter('elementor/frontend/print_google_fonts', '__return_false');

---

7. 重新测试网站

如果有顺利跟着本文学习，我们学会了在本地托管+应用 Google Fonts，然后也禁止了部分主题 or 插件默认的 Google Fonts 远程请求。

通常再度测试 PageSpeed Insights、Gtmetrix，有关字体优化的相关提醒，应该也会减少许多。

但字体优化事项不一定全部都会消失，因为有时需配合 WordPress 快取插件，像是 WP Rocket 插件 等 ..，才能达到完美效果（比如说预先加载功能等）。

好啰！ 这篇文章的教程就到这里啦~如果有相关的操作问题，或是想询问的，也欢迎在下面留言给我，有空我也会回复大家的！

---

常见问题

原文链接：https://www.itaoda.cn/blog/11058.html，转载请注明出处。