使用哈希自定义字体上传器插件上传自定义字体

已发表: 2023-09-11

您是否厌倦了在网站上使用相同的旧字体并希望使其看起来有所不同？如果您不是编码专家，请不要担心！我们有一个简单的指南，将向您展示一种将您喜欢的字体添加到 WordPress 主题的简单方法。本文档将引导您完成上传自定义字体的过程，一次一个步骤，让您可以轻松地为您的网站赋予独特的风格。

插件安装

要开始自定义和上传字体，您需要安装一个名为Hash Custom Font Uploader 的插件。

*注意：此插件仅与 HashThemes 主题兼容*

哈希自定义字体上传器安装

要安装哈希字体上传器，请按照说明操作：

转到插件 > 添加新插件 > 上传插件。
单击“上传插件”并从您的 PC 中选择 .zip 文件。
上传 .zip 文件后，单击立即安装。
然后激活插件。
您可以看到该插件显示为哈希自定义字体上传器。

安装插件后，您就可以使用自定义字体来启动字体上传过程。

让我们一步步引导您完成整个过程。

字体选择

由 HashThemes 提供支持的主题提供了多种 Google 字体供您选择。有超过 800 种 Google 字体。

但是，如果您正在寻找独特的东西，您可以随时探索众多字体网站，这些网站提供由多个字体设计师精心设计的更多种类的选择，并且可以在不同的网站上免费或付费使用。

Font Squirrel 就是此类网站的一个典型例子。该平台不仅让您可以自由地免费下载字体，还简化了将文件转换为字体上传所需格式的过程。

此外，值得一提的是，有许多高质量的字体可供购买，只需很少的费用，并且可以立即使用。

在本教程中，我们将演示如何使用 Font Squirrel 简化字体上传过程。

我们需要在 Hash Custom Font Uploader 中使用 2 种字体文件格式（WOFF 和 WOFF2）。 如果您想了解有关字体变体以及文件为何转换为 WOFF 和 WOFF2 格式的更多信息，请继续阅读。如果您想立即开始上传自定义字体教程，请单击此处。

了解不同的文件格式

在开始本教程之前，让我们先熟悉一下字体可以采用的一些典型文件格式。

TrueType 字体 (.ttf)：. ttf 字体格式是一种广泛用于桌面和 Web 排版的字体格式。此文件类型与 Windows 和 macOS 系统兼容。

OpenType 字体 (.otf)： Open Type 格式是 True Type 格式的扩展。此格式允许附加印刷功能，并且与 Windows 和 macOS 兼容。

Web 开放字体格式 (.woff)：此类格式专为 Web 使用而设计。它提供良好的压缩和浏览器兼容性。

Web 开放字体格式 2 (.woff2)：此文件格式是 Web 开放字体格式的改进版本，为 Web 字体提供卓越的压缩和性能。

PostScript Type 1 字体 (.pfb)： PostScript 类型的字体格式是旧版本的字体格式，主要用于 PostScript 打印行业。

SVG 字体 (.svg)：基于 XML SVG 字体通常用于网页图标和特殊设计。

位图字体 (.fon)：表示为像素网格的字体，适用于低分辨率显示。

这些是一些用于各种目的的字体格式。熟悉这些格式的原因是某些文件需要转换以获得额外的优势。

最常用的文件格式是用于桌面和网页排版的 TTF（True Type Font）和 OTF（Open Type Font）。

然而，截至 2021 年，最常用的 Web 使用字体格式是 Web 开放字体格式 (WOFF) 和 WOFF2（Web 开放字体格式 2）。

*注意：重要的是要知道字体的受欢迎程度可能会随着时间的推移而发展，新技术可能会取代旧技术。*

为什么需要将文件更改为.woff和.woff2格式？

虽然 TTF 和 OTF 文件可以直接上传到网络上，但将它们转换为 .woff 和 .woff2 文件格式有几个优点：

1、压缩：

将 TTF 和 OTF 文件转换为 WOFF 和 WOFF2 格式的主要原因是它们可以压缩大小。当文件大小较小时，网页加载时间会更快。这对于改善用户体验和 SEO 排名也至关重要。

2. 网页优化：

WOFF 和 WOFF2 格式非常适合网络并被广泛接受，包括字体子集功能，允许用户仅包含特定网页所需的字符和字形，从而进一步减小文件大小。

3. 浏览器兼容性：

现代网络浏览器广泛支持 WOFF 和 WOFF2 格式，确保跨不同平台和设备的可靠字体渲染。 TTF 和 OTF 文件可能具有不同级别的兼容性和支持。

4. 许可：

许多字体许可证倾向于允许在网络上使用 WOFF 和 WOFF2 格式，但它们可能对 TTF 和 OTF 文件有更多限制。通过将字体转换为 WOFF/WOFF2 格式，您可以确保符合字体许可要求。

5、性能：

WOFF 和 WOFF2 字体格式通常经过优化。因此，它们在 Web 环境中表现更好，从而实现更流畅、更快的文本渲染。

这些是将TTF和OTF文件转换为WOFF/WOFF2文件的基本必需品。接下来，我们将指导您完成字体上传程序。

在“FONT SQUIRRE L”网站中选择字体

现在，让我们开始字体选择过程并进一步探索。

在搜索栏中输入“Sinkin Sans”，您将看到字体预览及其不同变体。
接下来，下载 Sinkin Sans 字体的 OTF 文件。

本教程我们选择了“Sinkin Sans”字体。您可以选择并使用您喜欢的任何字体。此外，正如我们之前提到的，字体可以采用各种格式。 这里的 Sinkin Sans 字体文件是 OTF 格式。

将 .zip 文件解压到您指定的文件夹中。

网页字体生成器

哈希自定义字体上传器中使用的字体应为 WOFF 和 WOFF2 文件格式。因此，如果下载的字体是 WOFF 和 WOFF2 文件格式，那么您可以跳过以下步骤，直接进入哈希自定义字体上传器。但如果下载的字体不是 WOFF 和 WOFF2 格式，那么您将需要使用字体生成器/转换器来生成 WOFF 和 WOFF2 字体文件。

我们将使用 Font Squirrel 网站的 Webfont Generator 在线应用程序。
单击 Webfont Generator（Webfont 生成器），如下面屏幕截图中的 3 号所示。

要获取您的工具包，请单击“上传字体”按钮并上传下载/提取的字体文件

在本例中，我们选择“Sinkin Sans Regular”。
做出选择后，只需单击“打开”即可。
下载该套件。

解压下载的 zip 文件。您将看到 Webfont 生成器已创建我们的哈希自定义字体上传器插件所需的 .WOFF 和 .WOFF2 文件。

在哈希自定义字体上传器插件上上传自定义字体

Sinkin Sans 字体几乎已准备好在您的网站上使用，距离您仅几步之遥。请按照以下说明操作：

转到哈希自定义字体上传器
然后，按照说明上传 .woff2 和 .woff 字体文件，并确保选择字体粗细为Normal 400 。
在下一步中，为您的字体命名，以便在需要时更容易找到。在本例中，由于字体是 Sinkin Sans，因此我们对其进行了相应的命名。
单击“保存设置”保存它。
保存后，您将看到 Sinkin Sans 字体如何显示在底部。这也表明该字体正在运行，您现在可以使用它。

上传自定义字体的变体

字体可以有不同的样式和外观。在这里我们将学习如何为同一字体添加不同的字体样式。

我们在上面选择的字体（Sinkin Sans）有不同的变体，如细、浅、常规、中等、半粗体、粗体、黑色及其斜体。

这里我们要选择 Sinkin Sans 的Semi Bold风格。我们将使用另一个字体转换器网站而不是“Font Squirrel”

注意：互联网上还有许多其他转换器。 在这里，我们使用 CloudConvert。

首先，转到 OTF 转换器，它将我们的文件转换为 .woff2 和 .woff 文件。
在这里您可以看到它可以帮助您轻松转换文件。选择您要转换为的文件。在这里，我们要将文件 Sinkin Sans semibold .otf 转换为 .woff 和 .woff2
选择要转换的文件后，从桌面上“选择文件” 。
转换文件，这将需要一些时间。
转换完成后，将必要的文件保存到您的电脑上。

转到哈希自定义字体上传器
当您向同一字体添加粗细时，单击“添加字体粗细” ，而不是单击“添加新字体”。

然后，按照说明上传 .woff2 和 .woff 字体文件，并确保选择字体粗细为SemiBold 600 。
单击“保存设置”按钮进行保存。
您可以看到文本的显示方式。该文本比上面的文本更粗。
同样，您可以通过单击“添加字体粗细”来添加更多字体变体，并通过单击“添加新字体”来添加另一种字体。

使用您网站的字体

让我们在网站上使用上传的字体。

转到外观> 自定义。
在“版式设置”中，找到“正文”选项以进行进一步自定义。”
在“字体系列”选项中，搜索“Sinkin Sans”并选择它。
选择字体后，“字体粗细/样式”将显示我们之前添加的变体（普通 400 和半粗体）。
选择适当的变体，然后在右侧的定制器窗口中实时查看更改。
您可以根据自己的喜好调整字体大小、字母间距和行高。
如果您感到满意，请单击“发布”应用更改，您的网站将呈现新外观。

这就是上传自定义字体所需要做的全部工作。如果您有任何疑问，可以随时联系我们。

购买

哈希自定义字体上传器是一个高级扩展。单击下面的按钮即可购买。