如何以简单的方式将自定义字体添加到 WordPress

已发表: 2015-05-22

向您的计算机添加更多字体非常简单。 只需将文件下载到您的字体目录,然后您就可以开始在您选择的软件和应用程序中使用它们。

但是,如果您想在您的网站上使用自定义字体,尤其是访问者可能没有在他们的设备上安装的那些字体,它会变得有点复杂。

值得庆幸的是,作为 WordPress 用户,您可以使用一些很棒的免费工具将单个字体或整个字体库添加到您的网站。 一旦您为您的主题提供了可用的字体,您就可以开始将它们应用到您网站上使用的各种样式中。

在本文中,我们将向您展示在哪里可以找到高质量的免费和高级字体,如何将它们添加到您的 WordPress 网站,以及一些工具来帮助您为网站上的每种字体选择正确的设置。

WordPress的自定义字体

在哪里可以找到您网站的字体

在我们了解有关如何将自定义字体添加到 WordPress 网站的说明之前,让我们看一下可以找到新字体以修改网站上文本外观的一些地方。

谷歌字体

有一些很棒的免费在线资源可用,您可以在其中找到可以在您的网站中自由使用的开源字体。 您可能想探索的一些资源包括:

  • Google 字体:浏览 600 多种针对网络优化的开源字体。 在您的 WordPress 网站上使用这些字体非常简单,我们将在稍后介绍。
  • Font Squirrel:另一个免费使用字体的大型存储库。
  • Edge Web Fonts:由 Adob​​e Typekit 提供支持的免费 Web 字体集合。
  • Typekit:Adobe 提供的 4,000 多种免费和高级字体的专业集合,可用于网络和印刷。

如您所见,有大量合法的免费和高级字体在线资源,您可以使用它们来自定义 WordPress 网站的外观。

网页设计师的排版工具

为您的网站选择正确的字体集可能很困难。 该过程不仅仅是选择一种或两种您喜欢的字体,然后将它们添加到您的网站。

您不仅要考虑字体的外观,还要考虑您选择的大小、网站内容区域的宽度以及每种字体的最佳行高。

值得庆幸的是,您可以使用一些免费的在线工具来帮助您正确应用您选择的字体。 这样可以确保您的内容看起来最好

在自定义网站上的字体时,您绝对应该快速查看一个在线资源,即黄金比例排版计算器。 这个排版工具来自 Thesis Framework 背后的人,可让您输入字体大小,然后输入内容区域的宽度。 然后,该工具将为您的特定网站配置计算完美的印刷设置。

Type Scale 是另一种在线工具,可让您轻松确定网站上不同文本样式之间的相关大小。 输入基本字体大小(例如站点上段落文本的大小)后,您将了解每个不同标题应设置的大小

类型规模

有多种比例可供选择,包括上述黄金比例。 对设置感到满意后,您可以快速复制 CSS以在您自己的网站上使用。

WordPress 自定义字体插件

就像有很多地方可以在线查找字体一样,也有很多方法可以将它们集成到您的 WordPress 网站中。 但是,为了帮助您尽快入门,这里有一些最好的 WordPress 字体相关插件:

简单的谷歌字体

简单的谷歌字体插件

Easy Google Fonts 是一个免费插件,可让您在 WordPress 网站上使用来自 Google 存储库的600 多种免费字体。 该插件与 WordPress Customizer 工具一起使用。 这使您可以在最终决定在您的网站上使用哪种字体之前预览您的更改。

在您的网站上安装并激活插件后,您可以开始更改当前 WordPress 主题使用的字体。 为此,请转到 WordPress 定制器工具并单击“排版”部分。

简单的谷歌字体定制器

开箱即用,该插件可让您更改主题使用的主要样式的排版设置。 这可能包括段落和个别标题。 但是,通过 Easy Google Fonts 设置页面,您可以创建自定义字体控件。 然后将它们添加到定制器界面,为您提供一种简单的方法来更改列表、引号等元素使用的字体。

Easy Google Fonts 自定义字体控件

添加自定义字体控件后,您可以从定制器上的主题排版设置中访问它。

简单的谷歌字体主题排版

通过使用插件的此功能,您可以修改 WordPress 主题的任何元素或样式使用的字体。 添加到定制器的控件还包括字体粗细、文本修饰和变换属性,以及字体颜色、背景颜色、大小、行高和字母间距。

简单的谷歌字体颜色

通过将自定义字体控件与所提供的详细设置相结合,Easy Google Fonts 插件在修改 WordPress 网站上的文本外观时开辟了无限可能,而无需直接编辑任何代码。

使用任何字体

使用任何字体插件

强烈推荐使用上述 Easy Google Fonts 插件。 但是,它确实有一个缺点:您只能使用 Google 字体集合中的字体。 如果这 686 种字体都不吸引人,或者您想使用自定义字体,那么同样免费的 Use Any Font 插件是一个不错的选择。

安装并激活插件后,您可以直接从您的计算机将一种或多种字体上传到您的网站。 但是,在开始之前,您必须注册免费的 API 密钥(或进行捐赠),这会将插件连接到字体转换工具。

使用任何字体上传

一旦您上传了至少一种字体,您就可以将其分配给您网站的特定元素。 这包括默认元素列表,以及您定义的任何自定义元素。

使用任何字体分配

该插件还为 WordPress 帖子编辑器添加了一些字体控件。 这样可以轻松更改帖子和页面中使用的字体,单独而不是全局。

使用任何字体编辑器

分配字体后,您可以通过访问网站的前端来查看对排版的更改。 虽然此插件的控件无法与 Easy Google Fonts 插件提供的控件进行比较,但如果您只想将主题的特定元素使用的字体更改为您选择的自定义字体,那么 Use Any Font 可以工作很好。

用于 WordPress 的 Typekit 字体

用于 WordPress 的 Typekit

如果您想在您的 WordPress 网站上使用 Adob​​e Typekit 服务中的免费和高级字体,那么免费的 Typekit Fonts for WordPress 插件就适合您。

使用这个插件,您可以使用预定义的选择器,或者添加您自己的自定义 CSS 规则。 这确保了您想要使用 Typekit 字体个性化您网站的任何部分,您都可以使用此插件自由地执行此操作。

手动将自定义字体添加到 WordPress

如果出于某种原因,使用上述免费插件之一的想法没有吸引力,您可以随时手动更改 WordPress 网站上使用的字体。 如果您想使用的字体可以在 Google 字体存储库中找到,那么将其添加到您的网站非常容易。

添加谷歌字体

您只需在 Google 网站上选择字体,然后将相关代码复制到您网站的 head 部分和 CSS 样式表中。

添加 Google 字体 CSS

但是,如果您选择的字体没有托管在像 Google Fonts 这样的存储库中,您可以在其中简单地链接到它,那么您将需要自己托管字体。 这会稍微改变过程并添加一些额外的步骤,例如将字体上传到您的服务器。

文件管理器

您可以使用 FTP 软件或网络主机控制面板中的文件管理器工具上传字体文件。 将字体上传到专用字体目录是个好主意,最好是在您的子主题文件夹中,以帮助保持井井有条。

FTP

一旦字体文件在您的服务器上,打开您的主题 CSS 样式表文件进行编辑。 这可以在 WordPress 管理仪表板的外观 > 编辑器屏幕上完成。

自定义 CSS

将上述 CSS 添加到样式表以加载字体后,您可以在该 CSS 文件中的任何位置使用它来修改文本的外观,如下所示:

添加 Google 字体 CSS

出于性能原因,您应该尽可能尝试链接到外部字体存储库,例如 Google 字体。 但是,如果您无法在线找到要使用的字体,您可能不得不通过自己托管文件来牺牲部分页面速度。

结论

希望您现在知道在哪里可以找到自定义字体,以及如何开始将它们添加到您的 WordPress 网站。 通过使用免费插件之一,例如 Easy Google Fonts,您不仅可以开始更改您网站上使用的字体,还可以更改这些字体的呈现方式

借助 WordPress Customizer 工具,您现在可以轻松更改网站上文本的外观。 这一切都通过一组可视菜单进行,并带有实时预览。

如果您当前的主题无法让您对网站上使用的字体进行太多控制,那么通过使用上述方法之一,您现在可以轻松地进行这些更改,而无需自己编辑任何底层 CSS。

你最喜欢的字体是什么? 您想更改网站上的哪些排版设置? 如果您对字体、排版或 WordPress 有任何疑问,请在下面的评论中分享。