您想在不降低网站速度的情况下向您的网站添加第三方字体吗?
自定义字体可以改善网站的排版和用户体验,但加载时间较长。好消息是您可以在本地托管字体,以确保您的网站始终快速。
在本文中,我们将向您展示如何在 WordPress 中托管本地字体。
![如何在 WordPress 中托管本地字体以获得更快的网站 如何在 WordPress 中托管本地字体以获得更快的网站](https://www.wpbeginner.com/wp-content/uploads/2022/09/how-to-host-local-fonts-in-wordpress-for-a-faster-website-og.png)
为什么在 WordPress 中本地托管字体?
虽然版式和自定义字体可以提高网站的整体美观度,但它们确实会对WordPress 性能产生负面影响。例如,如果您使用 Google 字体中的自定义字体,那么它们是从第三方服务加载的,这会减慢您的网站速度。
幸运的是,有一种方法可以使用自定义字体,而不会减慢您的网站速度。WordPress 6.0中引入了新的 Webfonts API 。这允许您在本地托管字体,以便加载速度更快。
在本地托管 Google 字体的另一个原因是保持 GDPR 合规性。如果您的网站访问者来自欧盟,这是一个重要的法律考虑因素。
当某人访问使用 Google Fonts 的网站时,加载字体时 Google 会记录他们的 IP 地址。由于这是在未经他们许可的情况下进行的,因此欧盟现在认为这违反了隐私法规,并且您可能需要承担损害赔偿责任。
话虽这么说,让我们看看如何在 WordPress 中托管本地字体以获得更快的网站。我们将介绍两种方法,建议大多数用户使用第一种方法。
方法 1:使用插件在 WordPress 中托管本地字体
您需要做的第一件事是安装并激活OMGF(优化我的 Google 字体)插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
OMGF 是最好的WordPress 排版插件之一。它通过本地托管 Google Fonts 提供了一种适合初学者的方式来提高性能和 GDPR 合规性。
激活后,您需要访问“设置”»“优化 Google 字体”来配置该插件。您应该查看“优化字体”选项卡。
请注意“优化 Google 字体”标题下的声明,您只需要使用默认设置即可自动将 Google 字体替换为本地托管的副本。
![OMGF 设置 OMGF 设置](https://www.wpbeginner.com/wp-content/uploads/2022/09/localfontsomgfsettings.png)
这意味着当您向下滚动设置页面时,您所需要做的就是确保“字体显示选项”选择了默认设置“交换(推荐)”。
您现在所需要做的就是单击页面底部的“保存并优化”按钮。
![单击“保存并优化”按钮 单击“保存并优化”按钮](https://www.wpbeginner.com/wp-content/uploads/2022/09/localfontssaveoptimize.png)
您将在屏幕顶部看到一条消息,显示“优化已成功完成”。
恭喜!您的 Google 字体现在托管在本地。您的网站加载速度会更快,并且降低了欧洲诉讼的风险。
方法2:在WordPress中手动托管本地字体
您还可以使用我们有关如何在 WordPress 中添加自定义字体的指南中的 @font-face 方法在本地托管字体,而无需使用插件。虽然此方法需要更多工作,但它允许您在网站上使用您喜欢的任何字体。
您需要以网络格式下载您想要使用的字体。有很多地方可以找到很棒的免费网络字体,例如 Google Fonts、Typekit、FontSquirrel 等。
![下载谷歌字体 下载谷歌字体](https://www.wpbeginner.com/wp-content/uploads/2022/10/localfontsdownload.png)
如果您没有适合您的字体的 Web 格式,则可以使用 FontSquirrel Webfont 生成器对其进行转换。
现在您需要将字体存储在 WordPress 托管 服务器上。您可以使用 FTP 或主机的 cPanel 文件管理器上传文件。
您应该在主题或子主题的目录中创建一个名为“fonts”的新文件夹 并将其上传到那里。
![将字体上传到您的网站 将字体上传到您的网站](https://www.wpbeginner.com/wp-content/uploads/2022/10/localfontsfilemanageruploadfonts.png)
上传字体后,您需要使用自定义 CSS将字体加载到主题的样式表中。您可以将代码直接添加到主题的 style.css 文件中,或者使用主题定制器的附加 CSS 部分。
您可以使用 CSS3 @font-face 规则来做到这一点,如下所示:
12345 | @font-face { font-family : Arvo; src: url (http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf); font-weight : normal ; } |
由
不要忘记将字体系列和 URL 替换为您自己的。
之后,您可以在主题样式表或主题定制器的附加 CSS 部分中的任何位置使用该字体。您使用的 CSS 将取决于您的主题以及您希望使用本地字体的位置。以下是我们演示网站上的示例:
123 | h 1 { font-family : Arvo, Arial , sans-serif ; } |
由
如您所见,我们的标题现在使用本地托管的 Arvo 字体。
![使用主题定制器添加自定义 CSS 使用主题定制器添加自定义 CSS](https://www.wpbeginner.com/wp-content/uploads/2022/10/localfontsthemecustomizer.png)
我们希望本教程能帮助您了解如何在 WordPress 中托管本地字体以提高网站速度。您可能还想查看我们关于如何增加博客流量的指南,或者我们专家精选的必须具备的 WordPress 插件来扩展您的网站。