如何在没有插件的情况下在 WordPress 中使用下载的字体

已发表: 2017-09-16

谷歌字体是一个了不起的资源。在它如此普遍之前，制作使用独特字体的网站是一个真正的痛苦。现在，只需点击几下和一段代码，您的网站就从Helvetic-eh转变为Helvetic-awesome 。但是，如果您喜欢的字体不是 Google Fonts 系列的一部分怎么办？您需要知道如何使用下载的字体，因为您发现了一种能与您的胡须灵魂对话的出色时髦字体。

在您的网站上使用下载的字体并不像 clicky-clicky-paste-paste 那样简单。请注意，这不是一个艰难的过程，我将引导您完成它，这样您就永远、永远、永远不再拥有Helvetic-eh网站。

现在，我想指出您可以通过插件来做到这一点。回购中有少量可用。但是我们为什么要这样做呢？当几行代码就可以做同样的事情时，我是那种宁愿避免使用插件的人。过多的插件会导致大量的膨胀、不必要的 HTTP 请求，并减慢您的网站速度。

所以我们将手工导入这些字体——就像是 90 年代末一样。啊，是的。

选择和下载字体

我是字体综述的忠实粉丝。优雅的主题有很多你可以浏览看看你喜欢什么。所以点击其中的一些，看看你喜欢什么。

手写字体
复古字体
高档字体
草书字体
时髦字体
有趣的字体

对我来说，我将使用 Hipster 综述中的 Aventura 字体。

免费和付费时髦字体

您的第一步是找到字体的下载链接并将文件保存到您的计算机。它可能是一个包含各种文件格式的.zip文件。您会发现最常见的是.ttf （TrueType 字体）或.otf （OpenType 字体）。

制作网络字体（有点可选，但不是真的）

FontSquirrel 有一个很棒的工具，您可以使用它来确保没有人或浏览器与您网站的辉煌不兼容。由于您下载的大多数字体只能以单一格式使用，因此 FontSquirrel 工具可以使您不受字体作者分发的字体的限制。只要您有权使用该字体，就可以确保它适用于您的产品/网站。

如何使用下载的字体

只需上传您最近下载的字体并选择您的选项。就个人而言，我使用专家选项，只是为了获得所有我能获得的字体格式。其他的工作，但你没有得到那么多的文件类型，这是整个事情的重点。

FontSquirrel 也很棒，它为您提供了将它们导入您的网站所需的 CSS。这对用户友好如何？您只需将其复制并粘贴到其中（我们将在下面处理）。

如何使用下载的字体

将您的字体上传到 WordPress

如何使用下载的字体

完成后，您需要将字体上传到您的托管服务提供商。我总是通过 FTP 执行此操作（我使用 FileZilla，但您可以使用任何您想要的客户端）。

如果您不知道主机的 FTP 信息，请进入您的 cPanel 并查看Files -> FTP Accounts 。

如何使用下载的字体

您将在那里看到主机的每个 FTP 帐户，并且您还应该在每个帐户旁边看到一个配置 FTP 客户端链接。

如何使用下载的字体

当您进入那里时，cPanel 会为您提供服务器信息或 FileZilla（和其他）文件，您可以导入以设置凭据。我个人选择手动，但你做你喜欢的。即使您使用该文件，您也需要密码才能登录，因此这两种方法都是安全可靠的。

如何使用下载的字体

现在您已通过 FTP 登录到您的主机，导航到您站点的/wp-content文件夹。因为这是您的 WordPress 网站的内容，为什么不把它放在那里呢？随意把它放在任何地方，甚至在/wp-content/uploads 中。你做你。

如何使用下载的字体

FTP 非常容易上传您的文件。只需找到您下载的字体文件并将其拖到 FileZilla 的右下角窗格中即可。这将开始上传。您只需一秒钟左右即可在目录中看到它。

如何使用下载的字体

如果您使用了我们上面讨论的 FontSquirrel 工具，您也将对从它们下载的所有字体文件执行此操作。只需将它们拖放到您想要存储它们的任何位置即可。

在 CSS 中使用你的字体

您的字体现已上传并安全地依偎在其温暖、舒适的 wp-content 毯子中。是时候将所需的 CSS 导入添加到您的主题中了。

前往您的 FTP 客户端中的子主题目录（您正在使用子主题，对吗？）并找到style.css文件，右键单击它，然后选择查看/编辑以将其显示在默认文本编辑器中。

如果您没有子主题，请使用 Orbisius Child Theme Creator 超快速地完成。 之后您可以删除该插件。 我喜欢这个东西。

如何使用下载的字体

@字体脸

我们使用的代码直接来自 FontSquirrel（您可以自己编写或复制/粘贴下面的示例），我所做的只是将 URL 上传路径包含在/wp-content 中。其他一切都是 webfont 生成器提供的。

这个@font-face脚本所做的就是告诉你网站的样式表， “嘿，伙计，如果你想在某个时候使用它，我会把这个新字体放在这里。” 你知道，有点像你把纸杯蛋糕带回家告诉和你住在一起的人。

如果没有@font-face ，如果您尝试调用font-family: 'aventurabold'; 通过 CSS，您的站点将无法找到它，因为它从未被告知您将它保存在哪里。

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

保存文件，因为您打开它以通过 FileZilla 进行编辑，您将看到一个对话框，询问您是否要替换服务器上的那个。显然，你的答案是肯定的。

现在你所要做的就是进入你的custom.css （或者如果你使用 Divi， Divi -> 主题选项 ->在你的 WP 仪表板的导航窗格中的自定义 CSS 。）

您只需像添加任何其他字体一样添加 CSS 样式即可。我只是用'aventurabold'替换了我正在使用的'Roboto'和'Exo' Google 字体，一切顺利（感谢上面的@font-face导入）。

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

我们的劳动成果

这是以前的样子：

如何使用下载的字体

这是我将 Aventura 添加到 CSS 后发生的事情：

如何使用下载的字体

万岁！有用！做得好！去我们吧！

看起来不错，Friendo

就像马尔科姆雷诺兹船长曾经说过的那句名言，“我们已经做到了不可能的事情，这使我们变得强大。” 好吧，好吧，所以上传字体并通过 CSS 导入它可能还算不上完成了不可能的事情，但是您肯定做了许多 WordPress 用户不敢想的事情：在没有插件的情况下添加核心功能。

我的朋友们，这确实让你变得强大。

那么您最喜欢在网络上使用的不是 Google 字体的字体是什么？ 在评论中告诉我！

文章缩略图由 32 像素/shutterstock.com 提供