如何在WordPress中使用Typekit添加Awesome Typography

你有没有想过如何设计师能够在他们的网站上使用漂亮的自定义网页字体? 他们经常使用Typekit为WordPress添加自定义字体,这是一种Adobe服务,可让您访问高质量的字体。 在本文中,我们将向您展示如何在WordPress中添加Typekit字体以改进您的排版。

在WordPress的Typekit字体

为什么使用Typekit字体?

Typekit是一个流行的基于订阅的字体服务,可以为您节省大量的金钱。 您可以免费或每年以平稳的价格访问其数百种字体的整个库,而不用花钱购买单独的字体许可证。

Typekit库是超过1000种字体的大量集合。 您可以在Web上找到的一些最漂亮的字体可以通过Adobe服务提供。

他们的基本免费计划可以访问230多种字体,并且您可以在一个网站上免费使用2个字体系列。 其他计划从每年49.99美元到99.99美元不等。

这些令人敬畏的Typekit字体可以轻松地添加到任何网站,而不会降低您的网页加载速度。 字体是从Adobe的CDN提供的,加载速度要比将它们放在自己的网站上快得多。

Typekit的WordPress视频教程

为什么在WordPress上使用自定义Web字体?

排版在您的网站设计中起着至关重要的作用。

选择正确的字体将清晰地将您的个性和信息传达给您的读者。 无论您想要描绘什么样的形象 – 专业,友善,随意,经验丰富 – 您网站上的字体都可以帮助您展示正确的形象。

通过使用正确的字体集,你可以留下一个持久的印象。 而不是看起来像网络上的其他网站,你的文字看起来明显不同。 为您的WordPress网站选择适当的字体可以使您的网站从简单的设计走向美观和令人惊叹的艺术作品。

正确的自定义Web字体可以:

  • 提高转化率
  • 降低您网站的跳出率
  • 增加在您的网站花费的时间
  • 为用户创造难忘的体验

准备开始使用Typekit字体? 以下是如何使用Typekit来定制您的WordPress设计。

如何开始使用Typekit

首先,您需要创建一个Typekit帐户。 要做到这一点,只需访问Typekit.com比较可用的计划。

您需要选择要注册的计划。 免费的计划限制你到一个网站,并包括访问有限的字体。 您可能想要开始使用免费计划,然后再进行升级。 升级为您提供了一个更大的字体库,您可以在更多的网站上使用它们。

Typekit订阅计划

下一步是创建一个工具包。 该工具包可以让您为您的网站放置特定的字体和设置库,因此Typekit只加载所需的文件和代码。 要创建您的套件,请添加您的站点名称和域名,然后单击 继续

为您的网站创建一个工具包

完成填写工具包的信息之后,Typekit会给你一些JavaScript代码添加到你的网站。 您可以复制这个代码并将其粘贴到记事本等文本编辑器中,以便现在保存。 我们将在本教程的下一个步骤中将其添加到您的网站。

现在,你可以开始选择你的字体。 您可以浏览字体库,并按照分类,重量,宽度,x高度等选项进行过滤。

从Typekit库中选择一种字体

当你看到你喜欢的字体,你可以点击它来获得更多的细节和例子。 如果您想将其添加到您的网络工具包,请单击 网站使用:添加到工具包 按钮在右侧。

添加一个typekit字体到您的网络工具包

这会弹出一个弹出窗口,您需要将您选择的字体添加到刚刚创建的工具包中。

将您的自定义Web字体添加到套件

现在你可以点击 发布 按钮将更改保存到您的套件。

发布您的套件以保存您的更改

就这样! 您的字体套件现在可以使用了。

在WordPress中添加您的Typekit字体

将新的自定义Web字体添加到您的WordPress博客最简单的方法是使用WordPress Typekit插件。

我们推荐使用WordPress插件的Typekit字体。 安装并激活插件后,您可以访问 设置»Typekit字体 配置插件。

使用wordpress typekit插件来自定义字体

首先,您需要将之前保存的JavaScript代码粘贴到Typekit嵌入代码字段中。 之后,您可以添加CSS选择器来指定您要在网站上使用字体的位置。

在上面的截图中,我们添加了字体 h1.site标题 CSS选择器。

你的WordPress主题可能会为不同的元素使用不同的类。 您需要使用Web浏览器中的Inspect Element工具来查找这些CSS类。 您可能还想要检查我们的WordPress生成的CSS备忘单,以便初学者帮助您入门。

使用Google Chrome中的检查元素工具来查找CSS类