WordPress 如何从本地加载 Google 字体或其他字体

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格式:

将字体文件转换为 WOFF 格式
将字体文件转换为 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

需要为要使用的每个单独的字体文件重复添加代码片段。例如在网站上添加下面所示的三个字体文件:

将字体添加到CSS
将字体添加到CSS

第 5 步:为使用字体的位置添加 CSS

现在要做的就是开始在 CSS 中使用字体!

例如,如果我想让我的所有正文文本使用 Roboto Regular 字体,像下面这样添加 CSS:

body {font-family: 'roboto-regular', Arial, sans-serif;}

可以直接在主题的CSS样式表中添加,也可以在 WordPress 管理仪表盘中的自定义->额外的CSS中添加。

第 6 步:禁止主题加载 Google 字体

如果Wordpress网站仍在从 Google 字体服务器加载字体,可以将主题设置为使用系统字体。有些主题提供了设置字体的选项,例如,在 GeneratePress 主题中,提供设置字体选项:

禁止主题加载 Google 字体
禁止主题加载 Google 字体

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

禁止主题加载 Google 字体
禁止主题加载 Google 字体

也可以尝试禁用 Google 字体插件,来禁止主题加载谷歌字体。

如何使用插件实现从本地加载 Google 字体

如果感觉手动的方法太麻烦,可以尝试使用 CAOS for Webfonts 插件来实现从本地加载 Google 字体。

我没有测试过这个插件,但它看起来很容易使用。需要做的就是按名称搜索字体,然后单击 Generate Stylesheet

如何使用插件实现从本地加载 Google 字体
如何使用插件实现从本地加载 Google 字体

插件生成样式表后,会将其添加到主题的Header中。虽然该插件非常易于使用,但它仅适用于 Google 字体,而手动方法适用于任何字体。

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/wordpress/how-to-load-google-fonts-locally-in-wordpress/

(0)
牛奇网牛奇网
上一篇 2022年5月27日 下午12:39
下一篇 2022年5月30日 上午9:42

相关推荐

发表回复

登录后才能评论
很多新手不知道如何选择外贸独立站主机,这里推荐一款使用量最大,性价比最高的国外独立站主机Hostinger,立即获取优惠