Google 字体是谷歌于 2010 年推出的开源字体库。用户可以通过调用谷歌 API 来使用 Google 字体库。
谷歌字体在国外被广泛使用,但是国内由于网络的原因,所以使用的用户数量有限。谷歌字体有很多优势,它们可以免费使用,也可以于商业项目,可以通过CDN加载也可以下载到本地。
如果在国内使用谷歌字体,最好将其下载到 WordPress 网站本地,这样可以保证正常访问。下面我们就来介绍,WordPress 如何从本地加载 Google 字体或其他字体。
为什么要从本地加载谷歌字体
如果您做的是面向国外客户的外贸网站,应该不需要将谷歌字体下载到本地。但如果是面向国内的用户,最好将其下载到本地,以保证网络的正常加载。
将字体放到服务器本地也可以提高性能,因为不用从外部服务器请求加载字体。但是如果是外贸站就不用将 Google 字体放在本地,应为 Google 的服务器加载速度很快,而且 Google Fonts 拥有自己的 CDN ,可以确保在全球各地的加载速度。
如何从 WordPress 服务器本地加载 Google 字体
接下来,我们向您介绍如何在 WordPress 服务器本地托管 Google 字体。虽然下面以 Google 字体作为示例,但这种手动方法也适用于任何其他字体。
第 1 步:下载字体文件
首先,需要下载要使用的字体文件。在 Google 字体中,可以单击“选择此字体”链接。然后点击下载按钮:

在您单击下载按钮后,会下载包含谷歌字体各种粗细的压缩包文件。
但我们建议只选择所需的字体粗细即可:
- 常规
- 斜体
- 粗体
因此,解压缩文件并删除所有不想使用的字体:

第 2 步:转换为 WOFF 格式
从 Google Fonts 下载的字体,是 TTF 格式的字体。为了确保跨浏览器兼容性,建议使用 WOFF 或 WOFF 2.0 格式。如果下载的字体未采用该格式,可以使用免费的 Convertio 工具将其转换为 WOFF格式:

第 3 步:上传字体文件到服务器
接下来,使用 FTP 或宝塔面板的文件管理器将字体上传到服务器。如果您不知道如何通过 FTP 连接服务器,请查看我们的文章,如何使用 SFTP 工具连接 WordPress 网站服务器。
为了便于管理,您可以将字体添加到名为fonts的文件夹中。在本示例中,我们在网站的根目录下创建了fonts文件夹。

第 4 步:为字体添加 CSS
将字体文件上传到服务器后,需要使用 @font-face 将这些字体包含在网站的 CSS 中。
为此,您可以使用WordPress 定制器中的额外的 CSS选项中添加。或者,也可以使用Simple CSS 之类的插件。
以下是添加自定义CSS的示例::
@font-face {
font-family: 'roboto-regular';
src: url('https://vast-termite.w5.wpsandbox.pro/fonts/Robot-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
在此代码段中:
- 在 font-family 后添加实际使用字体的名称
- 将 URL 替换为服务器上相关字体文件的 URL
需要为要使用的每个单独的字体文件重复添加代码片段。例如在网站上添加下面所示的三个字体文件:

第 5 步:为使用字体的位置添加 CSS
现在要做的就是开始在 CSS 中使用字体!
例如,如果我想让我的所有正文文本使用 Roboto Regular 字体,像下面这样添加 CSS:
body {font-family: 'roboto-regular', Arial, sans-serif;}
可以直接在主题的CSS样式表中添加,也可以在 WordPress 管理仪表盘中的自定义->额外的CSS中添加。
第 6 步:禁止主题加载 Google 字体
如果Wordpress网站仍在从 Google 字体服务器加载字体,可以将主题设置为使用系统字体。有些主题提供了设置字体的选项,例如,在 GeneratePress 主题中,提供设置字体选项:

如果主题没有提供该功能,也可以从主题的 functions.php 文件中删除相关部分。或者,可以通过子主题来覆盖它:

也可以尝试禁用 Google 字体插件,来禁止主题加载谷歌字体。
如何使用插件实现从本地加载 Google 字体
如果感觉手动的方法太麻烦,可以尝试使用 CAOS for Webfonts 插件来实现从本地加载 Google 字体。
我没有测试过这个插件,但它看起来很容易使用。需要做的就是按名称搜索字体,然后单击 Generate Stylesheet:

插件生成样式表后,会将其添加到主题的Header中。虽然该插件非常易于使用,但它仅适用于 Google 字体,而手动方法适用于任何字体。
作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/wordpress/how-to-load-google-fonts-locally-in-wordpress/