如何在 WordPress 网站中添加自定义字体 [2022]

已发表: 2022-05-05

你知道你的网页设计的核心部分是什么吗? 向 WordPress 网站添加自定义字体是您可以采取的最终步骤,以使您的网站访问者留在您的网站上并增强网站的可读性。 您为网站选择的字体代表您的品牌形象。 让我们深入了解具有来龙去脉的自定义字体。

custom fonts

即使您可以在线找到免费字体,您也只能根据您的主题兼容性来使用它们。 这就是为什么我们要解释如何使用手动方式和 WordPress 插件在 WordPress 中添加自定义字体。

为什么要使用自定义字体以及在哪里可以找到它们?

如上所述,您会发现许多可以轻松下载字体的网站。 例如, Font Squirrel最多提供三种免费字体供您使用。 Google Fonts是另一个令人惊叹的选项,您可以在其中找到 900 多种字体可供选择。 除此之外, Edge Web Fonts还可以为您提供多种字体。 对于个人使用,您可以选择Fonts.com1001 Free Fonts

DaFont是最古老的字体库,拥有超过 60,000 种字体,您可以从中筛选所需的字体。 您需要下载选择的字体并且不像谷歌字体集成。 一种类似的字体库是UrbanFont ,它拥有大量的创意和利润丰厚的字体。

custom fonts

Adobe Fonts或 Typekit对于所有网页设计师来说是一个非常方便的字体库,因为它有 1900 多种可用字体。 即使您订阅了免费帐户,它仍然提供 200 多种网络字体。

如果你想按月租用字体并支付订阅费,你可以去Fontstand 它提供大约 2000 种令人惊叹的字体,并按月向您收费。 就像这个Type Network是另一个自托管字体库一样,您一次将获得 400 多个字体系列并轻松探索。

如何为网站选择最佳的自定义字体?

由于您已经知道为 WordPress 寻找理想的自定义字体的资源,您现在需要知道如何选择最佳字体。 过滤掉随机字体会使您的选择过程冗长而笨拙。 相反,您可以在为 WordPress 网站选择最佳自定义字体时尝试以下步骤。 在本博客中,我们将探索 Google 字体以选择最佳字体,并在过滤所有字体时查看最佳实践。

custom fonts

您喜欢的候选字体- 在 Google 字体中,您可以轻松地在搜索框中搜索所需的字体并设置类别。 搜索结果将根据您的调整而改变。 您可以看到字母、数字和其他格式的字体。

检查字体详细信息 - 检查字体详细信息很重要,因为您一眼就能看到所有可用的样式和字体大小。 使用 Google 字体您会发现一个惊人的好处是它显示了与该字体的流行配对。

custom fonts

在检查字体详细信息时,还要注意字体格式。 因为并非所有字体都支持所有浏览器系统。 这是最新的浏览器列表和支持的字体格式列表。

custom fonts

来源 - https://www.w3schools.com/Css/css3_fonts.asp

丰富您的字体集- 过滤完正确的字体后,您只需单击“选择此字体”按钮即可将这些字体添加到您的收藏中。

向 WordPress 网站添加自定义字体的简单方法

我们收集了一些以逐步格式向您的网站添加自定义字体的最简单方法。 让我们深入了解如何做到这一点。

如何在 WordPress 中手动添加自定义字体

手动添加自定义字体是不让您的网站变慢的最明智的方法。 由于您已经探索了一些字体大小以找到所需的字体,因此请先下载字体。 现在您需要将字体上传到您的网站托管帐户。 查看您为 WordPress 网站使用的主题。 将字体的 CSS 文件上传到您的帐户。 下载字体时,请记住从 .zip 文件中提取文件。

要上传您的字体文件,请转到 wp-content/themes/your-theme/fonts 目录。 为方便起见,您可以创建一个单独的字体文件夹。 使用文件管理器将文件上传到 hPanel。 现在导航到您的 WordPress 帐户,然后单击外观选项。 选择主题编辑器,您将在其中看到 style.css 文件。 在代码底部添加以下代码。

@字体脸{

字体系列:Aguafina Script-Regular;

src:网址 http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

字体粗细:正常;

}

现在单击“更新文件”按钮以保存更改。 请记住,每次访问者访问您的网站时,字体代码都会加载字体。 然而,该字体尚未应用于任何元素。 您必须更改完全相同的 style.css 文件才能将字体分配给特定元素。 例如,下面的代码将使我们网站的标题使用字体脚本。

.site-title {

字体系列: “Aguafina Script-Regular” ,Arial,无衬线;

}

如何使用 WordPress 插件设置自定义字体

对于所有 WordPress 用户,使用字体插件是设置自定义字体的最简单方法。 在这里,我们展示了一些最简单和最有用的字体插件,用于在 WordPress 网站上添加自定义字体。

WP 谷歌字体

custom fonts

您可以使用自定义字体并使用WP Google Fonts插件将它们应用于某些 CSS 元素。 从 WordPress 插件目录安装 WP Google Fonts 插件并使用您的 WordPress 仪表板访问 Google 字体控制面板。 您可以选择字体并调整选项,例如字体样式、分配的元素等。

字体插件

custom fonts

Fonts Plugin是 Easy Google Fonts 的免费增值替代品,其工作方式类似,可让您将 Google Fonts 顺利集成到您的页面中,而无需更改主题。 它也适用于定制器,允许您在发布之前尝试替代字体选项。 Fonts Plugin 还集成了 Adob​​e Fonts,这是一个额外的好处。 Fonts Plugin 还允许您在材料中使用 Adob​​e 的字体库。

使用自定义字体创建吸引人的网站

文本的可读性和优雅性会影响访问者浏览您网站的程度。 现在,任何人都可以从大量字体中进行选择以在其网站上使用。 这些天来,您没有理由在您的网站上使用任何旧字体。 自定义您的 WordPress 排版现在完全由您控制。

如果您发现此博客引人入胜且有帮助,订阅我们的博客以阅读更多此类博客。 加入我们的社区以分享您的想法。