跳到主要内容

您是否曾经想过设计师如何在他们的网站上使用漂亮的自定义Web字体?通常,他们使用Typekit(一种Adobe服务,可让您访问高质量字体)向WordPress添加自定义字体。在本文中,我们将向您展示如何在WordPress中添加Typekit字体以改善排版。

如何使用typekit在wordpress中添加很棒的字体
如何使用typekit在wordpress中添加很棒的字体

为什么使用Typekit字体?

Typekit是一种流行的基于订阅的字体服务,可以为您节省很多钱。您无需为单个字体许可付费(后者可能会变得非常昂贵),而可以免费或以固定的年费访问它们包含数百种字体的整个图书馆。

Typekit库包含1000多种字体。您可以通过Adobe服务Typekit获得一些可以在网上找到的最漂亮的字体。

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

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

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

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

选择正确的字体将清楚地将您的个性和信息传达给读者。无论您要描绘哪种图像(专业,友好,随便,有经验的),您网站上的字体都可以帮助投影正确的图像。

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

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

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

准备开始使用Typekit字体了吗?这是使用Typekit自定义WordPress设计的方法。

如何开始使用Typekit

首先,您需要创建一个Typekit帐户。为此,只需访问Typekit.com  比较可用计划。

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

如何开始使用typekit
如何开始使用typekit

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

如何开始使用typekit
如何开始使用typekit

在为工具包填写完信息后,Typekit将为您提供一些JavaScript代码以添加到您的网站中。您可以将此代码复制并粘贴到文本编辑器(如“记事本”)中以立即保存。我们将在本教程的下一步中将其添加到您的站点。

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

如何开始使用typekit
如何开始使用typekit

当您看到喜欢的字体时,可以单击它以获得更多详细信息和示例。如果要将其添加到您的Web套件中,请单击右侧的  Web使用:添加到套件按钮。

如何开始使用typekit
如何开始使用typekit

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

如何开始使用typekit
如何开始使用typekit

现在,您可以单击“  发布”按钮以将更改保存到工具包中。

如何开始使用typekit
如何开始使用typekit

就这样!您的字体工具包现在可以使用了。

在WordPress中添加您的Typekit字体

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

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

在wordpress中添加您的typekit字体
在wordpress中添加您的typekit字体

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

在上面的屏幕截图中,我们将字体添加到了  h1.site-titleCSS选择器中。

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

回到顶部