如何将离线字体添加到您的 WordPress 网站

已发表: 2022-10-31

如果您希望为您的 WordPress 网站添加一些额外的个性，那么您可能需要考虑加载离线字体。 虽然有很多方法可以做到这一点，但我们将向您展示使用 Font Squirrel Webfont Generator 的最简单方法之一。 下载字体文件后，您可以将它们上传到 WordPress 网站并像使用任何其他字体一样使用它们。 让我们开始吧！

这篇文章已经在我的办公桌上放了很长时间了，我想和你分享一下。 Google 字体在本地完全加载。 到目前为止，我一直在使用来自 Crunchify.com 的 Google 字体 Oswald 和 Lato。 只需打开出现在新标签中的上图中的 URL，您就会注意到它已经生成了 14种新字体。 如果您有以下任何问题，本教程也会有所帮助。 解压缩 Lato.zip 文件后，您将能够看到所有 10 种带有 .ttf 扩展名的 Lato 字体。 在大多数网站上，您只需要常规、粗体和斜体字体。

在第 2 步中，您现在必须将字体转换为 woff2、eot、svg、ttf 和 wof 格式。 可以将文件上传到站点 https://Font-Converter.net/en ，它将字体转换为这些格式。 没有什么需要说的了。 您现在可以从本地文件系统加载字体。

如何将自定义字体添加到 WordPress 主题？

图片来源：pinimg.com

有几种不同的方法可以将自定义字体添加到 WordPress 主题中。 一种方法是使用 Google 字体库。 您可以在 Google 字体网站上找到所有可用字体的完整列表。 找到喜欢的字体后，您可以将代码添加到主题的样式表 (style.css)。 例如，如果您想使用“Open Sans”字体，您可以在样式表中添加以下代码： body { font-family: 'Open Sans', sans-serif; 将自定义字体添加到 WordPress 主题的另一种方法是使用Easy Google Fonts之类的插件。 这个插件可以轻松地将自定义字体添加到您的主题中，而无需编辑任何代码。

Easy Google Fonts 插件可用于将自定义字体添加到您的 WordPress 网站。 通过使用这种方法，您将能够通过使用各种字体来吸引人们对您网站的关注。 排版已被证明在研究中具有许多好处。 一个简单的网站让客户更容易与您沟通。 通过使用 CSS 属性，除了更改其样式和位置外，您还可以更改首选字体的样式和位置。 除了您自己的字体控件，您还可以使用 WordPress 插件设置页面来添加它们。 如果您不想使用插件，可以使用此插件代替 Adob​​e 字体。

安装 Custom Adob​​e Fonts 插件，可以轻松地将这些字体合并到您的 WordPress 网站中。 安装插件，然后导航到 Adob​​e 庞大的字体库以找到适合您的字体（您必须注册才能使用它）。 选择字体后，单击它，然后在页面右上角查找“添加到 Web 项目”。 使用 Font Pair，您可以查看字体组合的外观，并且可以根据您看到的内容混合和匹配字体。 有几个优秀的网站出售由设计师自己创建的自定义字体。 Squirrel 字体包含一个大型字体库，而且实现起来也很简单。 您可以使用@Font-Face 的网络字体工具包。

您的 WordPress 网站现在应该可以使用了。 该工具包包括字体文件以及包含创建自己的 CSS 样式表所需的代码的样式表。 例如，我们需要为 OpenSans-ExtraBold- web 字体使用以下 CSS。 最好的解决方案是将所有字体文件保存在您选择的位置。

如何在 WordPress 中加载谷歌字体

导航到 WordPress 管理面板并选择添加新的。 从 Google Play 商店下载并安装 Easy Google Fonts。 安装插件后，您必须单击激活按钮才能开始使用它。

在您的网站或数字产品上，您可以使用 Google 字体试验 1000 多种不同的字体系列。 如果您想手动将 Google 字体添加到您的 WordPress 网站，有多种选择。 它们是免费和开源的，因此任何开发人员都可以使用它们。 集成 Google 字体最方便的方法是在您的 functions.php 文件中包含一个带有特定字体系列 URL 的片段。 如果您发现手动过程很困难，您可以使用插件。 您可以首先通过访问 WordPress 插件存储库来安装插件。 现在必须安装并激活它。

大多数 WordPress 主题都将 Google 字体集成作为其默认设置的一部分。 组成 OMGF 平台的插件允许您浏览网站上的 600 多种字体。 在“字体系列”下拉菜单中，您可以为网站的各个部分从 100 多种不同类型中进行选择。 如定制器预览中所示，有多种添加自定义字体控件的选项。

我应该在 WordPress 本地加载 Google 字体吗？

如果您的 WordPress 网站出现 Google 字体错误，您应该在本地加载 Google 字体以解决它们。 有一些您无法控制的外部资源和脚本，这使得压缩、缩小或优化它们变得不可能。 如果您不采取这些预防措施，您的 WordPress 速度将受到严重阻碍。

Wp-内容/主题/你的主题/字体

wp-content/themes/your-theme/fonts 文件夹是您可以存储要与主题一起使用的任何自定义字体的地方。 字体可以通过 FTP 或使用文件管理器插件添加到此文件夹。 将字体添加到此文件夹后，可以通过引用字体名称在主题的 CSS 中使用它们。

如果使用以下主题之一，全局样式可用于更改网站的字体。 在这种情况下，基本字体和标题字体在同一对字体中。 要保存新的字体对，请单击全局样式菜单中的发布按钮，或单击重置以恢复更改。 选择适当的自定义字体后，您可以根据需要随时更改它们。 如果要更改标题或基本字体的大小，可以通过选择每种字体下方和右侧的大小选项，然后从下拉菜单中选择大小来实现。 使用自定义 CSS，您可以更改全局默认字体大小。 如果您在测试后决定停止使用插件，请确保停用或删除插件。 无法将 Typekit.com 帐户链接到 WordPress.com 博客或网站。 如果要测试特定字体与给定语言的兼容性，请使用定制器。

在没有插件的情况下将字体添加到 WordPress

有几种方法可以在没有插件的情况下将字体添加到 WordPress。 一种方法是使用 Google 字体库。 只需访问 Google 字体网站，选择您要使用的字体，然后复制提供的代码。 接下来，打开您的 WordPress 仪表板并转到外观 > 自定义。 然后，单击“其他 CSS”选项卡并粘贴您从 Google 字体复制的代码。 保存您的更改，新字体将应用于您的网站。

主题不必在其默认设置中包含 Web 字体。 在浏览网页时，您可以使用浏览器下载它。 要将字体代码复制并粘贴到您的主题文件中，只需选择您想要的字体。 您可以同时使用多种字体，您将看到字体加载的时间。 转到 WordPress 博客仪表板，为您的 WordPress 博客添加更多 CSS。 将灰色框 1 中的整个代码复制到正文文本的网络字体中。 新的网络字体系列可以在Google 字体库的第二个灰色框中找到。 另外，下面的代码可以用来调整字体大小和字体粗细。