Divi WordPress Theme

寻找在您的WordPress网站上本地托管Google字体的方法吗? Google字体很棒,因为它可以为您的WordPress网站释放一大堆潜在的字体选择。 但这也可能导致对Google服务器的大量外部请求,这就是为什么您可能更喜欢只在本地托管字体的原因。

WP Rocket-WordPress缓存插件

虽然我将这篇文章的框架定为“如何托管 Google字体 在WordPress上本地”,我将向您展示的手动方法实际上将与 任何字体,因此绝不仅限于Google字体。

除了手动方法外,我还将分享一个插件,该插件可简化在本地托管Google字体的操作(但仅适用于Google字体-不适用于其他字体)。

为何无论如何都要在本地托管字体?

我其实不认为 最多 网站需要在本地托管其字体。 但这是一个很好的选择 一些 网站。

首先,在本地托管字体会打开网络上的整个字体世界。 您将能够使用找到的任何字体并拥有合法权利。 那太酷了!

除此之外,还有 能够 通过在本地托管字体来提高性能,因为您可以减少对托管字体的任何服务器的外部请求。 例如,您可以在我的测试网站上的Pingdom Tools瀑布中看到外部向Google服务器请求字体的请求:

Pingdom工具

现在,这绝对不意味着在本地托管字体 总是 使您的网站加载速度更快。

当您谈论Google字体时,Google的服务器已经非常快,并且Google字体具有自己的CDN以确保快速的全局加载时间。 此外,某人的浏览器可能已经缓存了字体,尤其是在您使用诸如Lato或Roboto之类的流行字体时。

基本上,我鼓励您在测试网站之前和之后进行测试,以确保在本地托管字体确实可以加快网站的速度。

如何在WordPress上本地托管Google字体:手动方法

好了,现在让我们进入操作方法部分,我将向您展示如何在WordPress上本地托管Google字体。

请记住–以我使用Google字体为例时,该手动方法也可以与其他任何字体一起使用

步骤1:下载字体文件

首先,您需要下载要使用的字体文件。

在Google字体中,您可以点击 选择此字体 关联。 然后点击下载按钮:

下载Google字体

当您点击下载按钮时,Google字体会为您提供一个ZIP文件,该文件的格式为 全部 字体的各种粗细。

但是,我建议仅选择最少数量的字体粗细-不要使用每个粗细。 一个好的堆栈是以下各项中的一个:

  • 常规的
  • 斜体
  • 大胆的

因此,解压缩文件并删除所有您不想使用的字体:

删除未使用的字体

步骤2:转换为WOFF格式(如果需要)

当您从Google字体下载字体时,它会为您提供TTF格式的字体。 为了确保跨浏览器的兼容性,我阅读的大多数资源似乎都建议使用WOFF或WOFF 2.0格式。

因此,如果您选择的字体尚未采用该格式,则可以使用免费的Convertio工具将其转换为WOFF:

TTF至WOFF转换器

步骤3:将字体文件上传到服务器

接下来,获取这些字体文件,然后使用FTP或cPanel File Manager将其上传到您的服务器。 如果您不确定如何通过FTP连接到服务器,请查看有关如何在WordPress上使用FTP的指南。

为了使字体文件易于查找,您可以将它们添加到名为 字型。 在此示例中,我创建了 字型 我的网站的根文件夹中的文件夹。 您可以在下面的屏幕截图中看到它的外观:

上传字体以在本地托管Google字体

步骤4:为字体添加CSS

将字体文件上传到服务器后,您需要使用@ font-face将这些字体包含在网站的CSS中。

为此,您可以使用 额外的CSS WordPress定制程序的“标签”标签。 或者,您可以使用汤姆·乌斯伯恩(Tom Usborne)的“简单CSS”之类的插件,这就是我对这些屏幕截图所做的工作。 有关更多信息,请查看有关如何安全地将自定义CSS添加到WordPress的文章。

选择添加自定义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;
}

对于此代码段:

  • 使字体系列成为实际字体系列的名称
  • 将URL替换为服务器上相关字体文件的实际URL

您还需要为正在使用的每个单独的字体文件重复代码片段。 这是我网站上三个字体文件的外观:

添加字体CSS

步骤5:添加CSS以在何处使用字体

现在,剩下要做的就是实际上开始在CSS中使用字体了!

例如,如果我想使我的所有正文文本都使用现在可以自我托管的Roboto Regular字体,则可以使用以下CSS:

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

您可以将此CSS添加到步骤4中添加CSS代码的位置。

我将使用WordPress Customizer的GIF向您展示差异。 在添加新CSS的同时观看正文文本:

使用本地托管的字体

步骤6:阻止主题加载Google字体

如果您的站点仍在从Google字体服务器加载字体,则可能是因为您的主题认为它仍然需要使用Google字体服务器上托管的字体。

要停止此操作,您可以尝试将主题设置为使用系统字体堆栈(如果有)。 例如,GeneratePress让我在WordPress Customizer中做出选择:

更改为系统堆栈

或者,您通常也可以从主题的functions.php文件中删除相关部分。 或者,如注释所示,您可以使用子主题来覆盖它:

主题功能.php

您也可以尝试使用“禁用Google字体”插件,尽管不能保证它适用于每个主题。

如何使用插件在本地托管Google字体

如果您对手动方法不知所措,还可以使用Daan van den Bergh的WordPress插件CAOS for Webfonts在本地托管Google Fonts。

我尚未对该插件进行广泛测试,但是它似乎很容易使用。 您要做的就是按名称搜索字体,然后单击 生成样式表

如何使用WordPress插件在本地托管Google字体

您还可以精确选择要包含的权重。

插件生成样式表后,便会将其添加到主题的标题中。

尽管该插件非常易于使用,但仅适用于Google字体,而手动方法适用于任何字体。

尝试今天在本地托管字体

在本地托管字体是一种以新字体和新字体打开网站的好方法 可能 加快您的网站。

如果您特别希望在本地托管Google字体,则可以使用一些插件来帮助您。 或者,您始终可以采用适用于任何网络字体的手动方法。

最后,与对WordPress网站进行的任何重大更改一样,我总是建议您进行测试,以查看在本地托管字体是否确实可以加速您的网站。 如果发现没有获得预期的性能优势,则可能需要考虑使用CDN来提供字体文件。

关于如何在WordPress上本地托管字体还有其他疑问吗? 在评论中让我们知道,我们将尽力提供帮助!

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=