在您的WordPress网站上托管和使用字体时，有很多不同的选择。您可以在本地托管它们，也可以使用Google字体（现在大多数主题都集成了Google字体），或使用其他3rd方服务，如Adobe Fonts。
今天，我们想深入探讨在WordPress中托管本地字体具有优势的几个原因。您不仅可以有更多的使用Google字体。如果我们查看Google Fonts分析，我们可以看到它们的浏览量超过17千万次。这是很多！Open Sans和Roboto是他们使用最广泛的两个字体系列，Roboto 在过去一年中增长了77%。我们有一篇关于最佳Google字体的文章，请务必查看： 根据CanIUse的说法，IE11、Safari和某些版本的Android浏览器可能会在仅使用WOFF2网络字体时出现问题。因此，您可能希望使用WOFF+WOFF 2以确保全面安全。WOFF 2提供了更高的压缩方法，这就是您想要同时使用两者的原因。
WOFF2浏览器支持
使用 3rd 方服务时，几乎不可能把它搞砸，因为它们考虑了开箱即用的广泛浏览器支持。因此，在本地托管时，您必须更加小心您的字体类型选择。
4. 不要没有CDN
如今，许多站点都在使用Cloudflare或KeyCDN等CDN来加速其资产的交付。这很重要，因为它支持HTTP/2的CDN提供商。
如何在WordPress中托管本地字体
现在是时候进行有趣的部分了！在WordPress中托管您的本地字体。我们在下面进行了两种不同的选择，一种是使用我们购买的高级字体，第二种实际上是使用 Google 字体并将其托管在本地。在本教程中，我们使用全新的WordPress安装并安装了2017主题。
- Proxima Soft字体。由Mark Simonson创建的Proxima Nova Soft是原始Proxima Nova字体的更新版本。我们选择Fontspring是因为它们不需要任何3rd方跟踪脚本，而且该字体是一次性购买的，可以在无限数量的网站上使用。购买字体时要非常小心，因为其中很多需要3rd方跟踪脚本，这在某种程度上违背了在本地托管它们的目的。
Fontspring
我们购买了Proxima Soft Regular和Proxima Soft Bold字体。通常，对于大多数网站来说，常规字体类型和粗体就足够了。根据您的站点，您可能还需要斜体和半粗体。
步骤1
购买字体后，您将收到一封电子邮件，其中包含字体文件的链接。
Proxima Soft字体下载
步骤2
每个字体版本，例如粗体和正则都有自己的字体类型，例如WOFF2、WOFF、TTF等。在这个例子中，我们将只使用粗体和粗体正则的WOFF和WOFF2版本，这确保全面的现代浏览器支持。
本地字体文件
步骤3
我们获取字体文件并通过FTP将它们上传到我们的WordPress站点到我们创建的名为“fonts”的文件夹中。在此示例中，我们将CDN用于我们的所有资产，以及来自KeyCDN团队的免费CDN Enabler插件。这个插件会自动复制我们刚刚上传到CDN的字体。即使我们说在本地托管它们，CDN仍在引用您的本地资产。重要的部分是您从同一位置提供所有资产，而不是引用多个域（主机）。
将字体上传到网络服务器
步骤4
您需要在WordPress网站上的CSS中引用新字体。现在很多主题都有自定义CSS面板，或者您可以使用像Simple Custom CSS and JS这样的免费插件。我们将插入以下代码，引用我们的CDN URL。
@font-face { font-family: \'proxima_softregular\'; src: url(\'https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2\') format(\'woff2\'), url(\'https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff\') format(\'woff\'); font-weight: normal; font-style: normal; } @font-face { font-family: \'proxima_softbold\'; src: url(\'https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2\') format(\'woff2\'), url(\'https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff\') format(\'woff\'); font-weight: normal; font-style: normal; }您还需要更新样式以指向新的字体系列。这是我们在2017主题中使用的代码示例。
body {font-family: \'proxima_softregular\', Arial, sans-serif;} h1,h2,h3,h4,h5,h6 {font-family:\'proxima_softbold\', Arial, sans-serif;}这是来自Simple Custom CSS and JS插件的屏幕截图。
自定义字体CSS代码
步骤5
如果您的WordPress主题已经集成了Google字体，您需要确保禁用它们。否则，您可能会同时加载本地字体和Google字体。由于我们在本教程中使用了2017主题，因此我们使用免费的Disable Google Fonts插件。这仅适用于WordPress中的默认主题。对于大多数主题，您可能需要联系开发人员，他们可以快速提供禁用 Google字体的功能。或者检查他们的文档，通常这是一个非常快速的调整。某些主题甚至可以选择在后端打开或关闭它们。
就是这样！这是我们的新Proxima Soft字体加载的屏幕截图，用于我们的正文字体和2017主题的标题。
wordpress网站上的新字体
这是我们的HTTP请求的屏幕截图。如您所见，我们只有2个对WOFF2字体的请求，而不是我们之前显示的Google的4个请求。我们在网站上也有WOFF字体，但由于Chrome支持WOFF2，所以改为拉取这些字体。例如，如果我们使用IE 11访问该站点，则会加载WOFF字体。
本地托管字体的HTTP请求
2. 如何在本地托管Google字体
在本地托管字体的第二种方法是实际使用您在Google Fonts上已经喜欢的字体，然后将其移动到您的服务器或CDN。众所周知，Open Sans非常轻巧且速度超快。所以我们将在我们的例子中使用它。
步骤1
获取Google字体的最佳方法是使用免费的google-webfonts-helper工具，我们将在本教程中使用该工具。您可能还想查看Font Face Observer项目。您需要做的第一件事是搜索您想要的Google字体，然后选择样式。我们再次选择常规和粗体 (700) 字体样式。
下载Open Sans网络字体
步骤2
然后你需要选择你想要的浏览器支持。现代浏览器会给你WOFF和WOFF2字体，这正是我们想要的。最好的支持为您提供WOFF、WOFF2、EOT、TTF和SVG。如您所见，它为您提供了可以复制到剪贴板的代码，以及包含字体的下载zip。
现代浏览器中字体的CSS
其余的说明与我们上面的高级字体示例非常相似。
步骤3
我们获取字体文件并通过FTP将它们上传到我们的WordPress站点到我们创建的名为“fonts”的文件夹中。在此示例中，我们将CDN用于我们的所有资产，以及来自KeyCDN团队的免费CDN Enabler插件。这个插件会自动复制我们刚刚上传到CDN的字体。即使我们说在本地托管它们，CDN仍在引用您的本地资源。重要的部分是您从同一位置提供所有资源，而不是引用多个域（主机）。
将Google字体上传到网络服务器
步骤4
您需要在WordPress网站上的CSS中引用新字体。现在很多主题都有自定义CSS面板，或者您可以使用像Simple Custom CSS and JS这样的免费插件。我们将插入以下代码，引用我们的CDN URL。
/* open-sans-regular - latin */ @font-face { font-family: \'Open Sans\'; font-style: normal; font-weight: 400; src: local(\'Open Sans\'), local(\'OpenSans\'), url(\'https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2\') format(\'woff2\'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url(\'https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff\') format(\'woff\'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-700 - latin */ @font-face { font-family: \'Open Sans\'; font-style: normal; font-weight: 700; src: local(\'Open Sans Bold\'), local(\'OpenSans-Bold\'), url(\'https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2\') format(\'woff2\'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url(\'https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff\') format(\'woff\'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }您还需要更新样式以指向新的字体系列。这是我们在2017主题中使用的代码示例。
body {font-family: \'Open Sans\', Arial, sans-serif;} h1,h2,h3,h4,h5,h6 {font-family:\'Open Sans\', Arial, sans-serif;}这是来自Simple Custom CSS and JS插件的屏幕截图。
本地托管的Open Sans字体的CSS
步骤5
如果您的WordPress主题已经集成了Google字体，您需要确保禁用它们。这似乎有点讽刺，因为我们使用的是Google字体。但您需要这样做的原因是禁用外部请求。由于我们在本教程中使用了2017主题，因此我们使用免费的Disable Google Fonts插件。这仅适用于WordPress中的默认主题。对于大多数主题，您可能需要联系开发人员，他们可以快速提供禁用 Google 字体的功能。或者检查他们的文档，通常这是一个非常快速的调整。某些主题甚至可以选择在后端打开或关闭它们。
就是这样！这是我们为2017主题的正文字体和标题加载的新Google Open Sans字体的屏幕截图。
本地托管的Open Sans字体示例
这是我们请求的屏幕截图。如您所见，我们只有2个对WOFF2字体的请求，而不是我们之前显示的Google的4个请求。我们在网站上也有WOFF字体，但由 Chrome支持WOFF2，所以改为拉取这些字体。例如，如果我们使用IE 11访问该站点，则会加载WOFF字体。
打开Sans HTTP请求
小结
就是这样！您现在知道如何从高级字体商店托管本地字体或将Google字体移动到您自己的服务器和/或CDN。所以现在你可以去看看那里所有漂亮的字体，而不必担心它们如何影响性能。他们可能只是为您的WordPress网站改头换面（请务必阅读我们关于系统字体。
