WordPress网站本地托管Web字体实用指南

在WordPress网站上托管和使用字体时，您拥有多种选择。您可以选择在本地托管字体，利用Google字体（现已成为许多主题的标配），或借助Adobe Fonts等第三方服务。今天，我们将深入探讨在WordPress中本地托管字体的优势，不仅在于扩展HTML字体选择，更在于可能带来的性能提升。下面将详细介绍如何在本地托管高级字体以及来自Google字体的字体系列。

### 什么是Web字体？

当您浏览WordPress网站时，您会看到两种主要字体类型：Web安全字体和Web字体。它们可以单独使用，也可以混合搭配。

**Web安全字体**是预装在设备或操作系统中的字体，如Arial、Times New Roman和Courier New，以及通用字体系列，如serif、sans-serif和monospace。这些字体陪伴我们多年，您可以在Web安全字体的完整列表中找到更多例子。

**Web字体**则未预装在设备上，需要浏览器下载才能显示。例如，Google的Open Sans和Roboto字体，以及Adobe Fonts的Proxima Nova字体。Google Fonts作为一个开源字体目录，被广泛使用。根据BuiltWith的数据，在排名前10,000的网站中，超过45%的网站使用Google字体。其浏览量超过17千万次，这是一个惊人的数字！Open Sans和Roboto是最受欢迎的两个字体系列，Roboto在过去一年中增长了77%。我们推荐您阅读《15种最佳Google 字体（按数字排序）》一文。

### 本地托管字体与第三方字体

在深入本教程之前，了解本地托管字体和第三方服务之间的优缺点至关重要。本地托管字体意味着您在服务器上拥有字体文件（或复制到CDN），而使用第三方服务（如Google Fonts或Adobe Fonts）只需链接到外部资源。

#### 本地字体的优势

1. **更广泛的字体选择**
使用本地字体的一个显著优势是您可以选择更多字体！虽然Google Fonts和Adobe Fonts等第三方服务拥有庞大的字体库，但它们无法与高级字体商店相比。您可以在其中购买任何高级网络字体并将其托管在网站上。本教程中我们将使用高级字体，这些字体无法从任何第三方服务获得。

2. **更好的整合**
由于字体选择范围更广，本地托管字体可能让您选择一种与品牌更好地集成的字体，保持网站整体风格的一致性。这完全取决于您的设计需求和偏好。

3. **不依赖第三方服务**
当您在本地托管字体时，无需依赖第三方服务或其服务器。众所周知，Adobe Fonts（前身为Typekit）等服务可能会出现故障，影响您的网站形象。减少对第三方的依赖总是明智的选择。

4. **完全控制缓存**
使用本地字体，您可以完全控制字体文件的缓存。如果您使用Google Fonts或其他第三方服务，可能会遇到资源缺少缓存验证器或需要expires headers的错误或警告。这些问题需要在服务器级别解决，而您在第三方服务器上无法控制。

5. **更少的请求等于更快的加载时间**
由于必须从第三方下载Web字体，这可能会影响网站加载速度。您永远无法确定第三方服务器的实时性能。但通过WordPress主机，您可以对此进行更多控制，或应该这样做！例如，Adobe Fonts添加了2个外部HTTP请求，并对所有字体格式进行了base64编码。您只需提供WOFF和WOFF2格式（如果进行额外压缩）。使用Google Fonts，您还有一个额外的DNS请求来查找fonts.googleapis.com以获取CSS文件，然后向fonts.gstatic.com发出其他请求以下载字体文件。当您在本地托管所有请求时，所有请求都来自同一个域，且可能不需要额外的CSS文件，因为它将在您的WordPress主题的CSS文件中。

6. **单个HTTP/2连接**
如果您尚未了解HTTP/2的优势，我们强烈建议您学习。通过在本地或CDN上托管字体，您可以利用单个HTTP/2连接实现更好的并行性和多路复用。

#### 本地字体的缺点

尽管本地托管字体有许多优势，但也存在一些缺点：

1. **Google字体可能已被缓存**
Google Fonts使用自己的CDN，速度极快。由于大量网站使用Google Fonts，用户很可能已在浏览器缓存中拥有这些字体。如果您使用更独特、更优质的高级字体，实际上可能会增加下载时间。例如，如果有人访问使用Google Fonts中的Roboto字体的网站，该字体将被下载到他们的缓存中。如果他们随后访问也使用Roboto的您的网站，则无需再次下载。但如果是新发布的高级字体，如Proxima Soft，则很可能需要下载，增加加载时间。

2. **更复杂**
并非每个人都是WordPress专家。托管本地字体需要更多设置。例如，如果您的WordPress主题自动调用Google字体，您需要找到方法禁止在本地调用它们。这可能需要联系主题开发人员以快速提供代码行。这听起来可能复杂，但我们将尽可能简化教程中的解释。

3. **更谨慎的字体选择**
当您托管本地字体时，必须选择要支持的字体类型。如果只选择较新的格式，如WOFF2，可能会忽略较旧的浏览器。例如，IE11、Safari和某些版本的Android浏览器在仅使用WOFF2时可能会出现问题。因此，您可能希望使用WOFF+WOFF2以确保全面支持。WOFF2提供更高的压缩方法，这就是同时使用两者的原因。而第三方服务几乎开箱即用，考虑了广泛的浏览器支持，因此本地托管时必须更小心选择。

4. **不要没有CDN**
如今，许多站点使用Cloudflare或KeyCDN等CDN加速资产交付。这对性能至关重要，可以全面减少延迟和DNS查找时间。如果您使用本地字体而不使用CDN，网站速度可能会变慢。因为所有这些服务都使用CDN提供字体。因此，除非您的流量仅限于小地理区域，否则在托管本地字体时始终使用CDN。当然，请确保您使用的是支持HTTP/2的CDN提供商。

### 如何在WordPress中托管本地字体

现在，让我们进入最有趣的部分——在WordPress中托管本地字体。我们将使用一个全新的WordPress安装并安装2017主题，展示两种方法：使用购买的高级字体和本地托管Google字体。

#### 如何在本地托管高级字体

为了在本地托管高级字体，我们选择了Fontspring和2017年1月发布的新Proxima Soft字体。Proxima Soft是Proxima Nova字体的更新版本，由Mark Simonson创建。我们选择Fontspring是因为它们不需要第三方跟踪脚本，且字体是一次性购买，可在无限数量的网站上使用。购买字体时需谨慎，因为许多字体需要第三方跟踪脚本，这与本地托管的目的相悖。

我们购买了Proxima Soft Regular和Bold字体。对于大多数网站，常规和粗体通常足够。根据您的需求，您可能还需要斜体和半粗体。

**步骤1：购买字体后，您将收到包含字体文件链接的电子邮件。**

**步骤2：每个字体版本（如粗体和正则）都有不同的格式，如WOFF2、WOFF、TTF等。**
我们只使用WOFF和WOFF2版本，以确保现代浏览器支持。

**步骤3：获取字体文件并通过FTP上传到WordPress站点的“fonts”文件夹中。**
我们使用KeyCDN的免费CDN Enabler插件自动复制这些字体到CDN。即使我们说在本地托管，CDN仍在引用本地资源。关键在于从同一位置提供所有资源，而不是引用多个域。

**步骤4：在WordPress网站的CSS中引用新字体。**
许多主题提供自定义CSS面板，或可以使用Simple Custom CSS and JS插件。我们将插入以下代码，引用CDN URL。

“`css
@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;
}
“`

更新样式以指向新的字体系列：

“`css
body {
font-family: ‘proxima_softregular’, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: ‘proxima_softbold’, Arial, sans-serif;
}
“`

**步骤5：如果您的主题已集成Google字体，需确保禁用它们。**
我们使用Disable Google Fonts插件（适用于默认主题）。对于大多数主题，您可能需要联系开发人员或查看文档以禁用Google字体。某些主题甚至可以选择后端开启或关闭。

这是我们的新Proxima Soft字体加载的屏幕截图，用于正文字体和标题。

这是我们的HTTP请求屏幕截图。如您所见，我们只有2个对WOFF2字体的请求，而不是之前显示的Google的4个请求。我们在网站上也有WOFF字体，但由于Chrome支持WOFF2，所以改为拉取这些字体。例如，使用IE 11访问时，会加载WOFF字体。

#### 如何在本地托管Google字体

本地托管字体的另一种方法是使用您在Google Fonts上喜欢的字体，然后将其移动到您的服务器或CDN。Open Sans非常轻巧且快速，我们将使用它作为例子。

**步骤1：使用免费的google-webfonts-helper工具搜索并选择您想要的Google字体样式。**
我们选择常规和粗体(700)。

**步骤2：选择您想要的浏览器支持。**
现代浏览器提供WOFF和WOFF2字体，这正是我们想要的。最佳支持包括WOFF、WOFF2、EOT、TTF和SVG。工具会提供可复制到剪贴板的代码和包含字体的下载zip。

**步骤3：获取字体文件并通过FTP上传到WordPress站点的“fonts”文件夹中。**
我们使用KeyCDN的CDN Enabler插件自动复制这些字体到CDN。

**步骤4：在WordPress网站的CSS中引用新字体。**
我们将插入以下代码，引用CDN URL。

“`css
/* 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+ */
}
“`

更新样式以指向新的字体系列：

“`css
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插件的屏幕截图。

这是我们的新Google Open Sans字体加载的屏幕截图。

这是我们的HTTP请求屏幕截图。如您所见，我们只有2个对WOFF2字体的请求，而不是之前显示的Google的4个请求。我们在网站上也有WOFF字体，但由于Chrome支持WOFF2，所以改为拉取这些字体。例如，使用IE 11访问时，会加载WOFF字体。

### 小结

通过以上步骤，您现在知道如何从高级字体商店托管本地字体或将Google字体移动到您自己的服务器和/或CDN。您可以自由探索所有漂亮的字体，而不必担心它们如何影响性能。这些改变可能只是为您的WordPress网站带来全新的面貌（请务必阅读我们关于WordPress字体的深入指南）！另一个不错的选择是系统字体。