如何将自定义字体添加到您的 WordPress 网站

为什么使用标准字体让你的博客变得乏味? 让您的博客谈论您充满活力的个性以及您使用各种自定义字体涵盖的主题。 自定义字体是一项不错的功能,可以让您的博客看起来比其他人更受欢迎。

面对现实吧; 我们都喜欢具有正确字体的博客和网站。 它们不仅装饰网站,还有助于吸引用户访问您的内容。 但是,标准 WordPress 字体的选择是有限的,并且取决于您使用的主题。 好消息是您可以手动添加它们或使用专门的插件。

在这里,出现了两个问题—— 在哪里获得自定义字体 对于 WordPress 和 如何安装自定义字体 在您的 WordPress 网站上。

让我们来了解一下。

为什么要使用自定义字体?

Times New Roman 和 Georgia 被认为是网站上唯一的文本字体的日子已经一去不复返了。 在过去的几年里,随着 Google Fonts 等字体的出现,字体空间发生了彻底的变化。

如今,互联网上有数百种免费字体、信息和培训辅助工具以及专为设计而设计的资源。 与 Adob​​e Illustrator、Photoshop 和其他经典应用程序不同,WordPress 默认情况下不会让您完全控制字体。 只有部分主题选择支持和使用自定义字体。

因此,在这篇文章中,您将学习如何找到合适的自定义字体以及如何在您的 WordPress 网站中使用它们。

使用自定义字体的重要性

你问,为什么要更改字体、单词之间的缩进、行距、字母间距或字体饱和度? 尽管如此,一些研究证明, 排版提高阅读理解.

很大程度上取决于字体的构造。 在有意识和潜意识层面——每个人都通过设计来评估网页的内容。

字体设计会影响读者,即使他们不注意. 放弃字体设计,就是放弃开发本身! 读者的心情取决于它。 字体要么使阅读更容易,要么迫使用户离开页面。

所有 Web 浏览器都包含一组默认字体。 这意味着如果页面的 CSS 中没有指定字体,那么将使用标准版本。 您始终可以使用默认字体,但它们会使用户的工作复杂化。 这就是为什么必须使用自定义字体的原因。 如果您的主题没有为您提供更改字体的选项,许多网站和工具可以提供帮助。

谷歌字体替代品

在哪里可以找到自定义字体

你们中的许多人都知道免费的 Google 字体。 还有更多的网站可以找到漂亮的字体。 其中一些免费供个人使用。 如果您需要用于商业用途,则需要许可证。 Google 字体和 Adob​​e Edge 字体是免费的。 这就是为什么它们不是那么独特。 这不适合我们。

这里有几个 查找字体的其他资源 免费和商业用途:

  1. 模板怪物 — 在 TemplateMonster 市场网站上,您会找到所需的一切网页设计。 还有许多字体和字体包供个人使用,价格低廉。 此外,它们还展示在 一个 Web 开发工具包. 该系列是巨大的和创造性的。 为了帮助您选择,小册子或框架上显示的所有字体。 每种字体也都附有商业许可证。
  2. 我的字体 — MyFonts 目前提供世界上最多的字体选择。 然而,这里的价格也在较高的部分。 因此,如果您的预算紧张,它可能不适合您。
  3. 字体弹簧 — Fontspring 出售用于商业用途的精美字体。 但几乎在任何家庭中都有 1-2 种免费字体可以用于个人目的。 此外,还有一个带有免费字体的单独部分。 该系列充满活力。 但是在下载之前,您必须仔细研究特定字体的许可信息。
  4. 字体 — 它也是不同字体的广泛集合。 选择任何一个,您将看到一个包含有关它的详细信息的页面。 有很多免费字体,它们分为单独的部分。 CufonFonts 上的排序系统非常灵活方便。 此外,还包括 Webfont 支持。
  5. 大丰 — 另一个可访问的 3,500 种免费字体集合。 它们中的大多数仅供个人使用。 DaFont 的一个不错的功能是类别系统。 您可以选择漫画、视频游戏、复古或日文字符风格的字体。

字体的选​​择非常诱人,因为它们都很漂亮。 但你不应该选择很多。 采用 网站上不超过两种字体. 然后您的网站的外观将是一致的。 一旦你选择了你的字体,一定要下载你将要使用的每种样式的文件(正常、粗体、斜体等)。

现在您已经为网站选择了合适的字体,让我们看看如何添加它。

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

有几种方法可以将字体添加到 WordPress 网站:

  1. 插件:在这种情况下,使用不同的 WordPress 插件来促进该过程。
  2. 手动:使用此方法,您需要将下载的字体上传到网站并编辑 CSS 文件。
  3. 主题:许多流行的主题包括用于自定义字体的内置选项(注意 – 我们不会介绍此选项,因为该过程会根据您使用的主题而有所不同,但高质量的高级主题,如 总 WordPress 主题 将提供您可以轻松遵循的在线文档 – 像本指南 将自定义字体添加到 Total)

选项 1 – 使用插件更改 WordPress 字体

如果我们不关心全局更改,我们可以安装 WordPress 插件来更改您网站上的字体。

自定义字体插件的特点

开源软件有利于社区利益的优势,WordPress也有这个优势。 几个 WordPress 插件允许您添加自定义字体。 这么多的插件怎么选合适的? 自定义字体插件有什么特点?

这里有几点需要考虑:

  • 能够使用自定义字体
  • 能够使用一种以上的字体
  • 目标标头和组件
  • 奖励:从可视化编辑器更改字体设置的能力

就这样。 列表中的第一个功能非常重要。 您始终可以从 DaFont、Font Squirrel 等网站下载字体,但您需要能够将它们上传到 WordPress。

让我们看一些允许您上传自定义字体的 WordPress 插件。

自定义字体上传器

自定义字体上传器

这个插件允许你下载谷歌字体并将它们应用到你博客的各种元素中。 例如,文章或页面的标题或正文。

使用任何字体

使用任何字体

这是一个 WordPress 插件,它为您提供了一个方便的界面来下载字体并直接通过可视化编辑器使用它们。 WordPress 可视化编辑器可以自动更改任何文本的字体。 这个插件提供了几个功能,这使得添加自定义字体的过程更加易于管理。

WP 谷歌字体

WP 谷歌字体

WP Google Fonts 允许您使用 Google 字体目录。 这个插件的惊人好处之一是添加了近 1000 种 Google 字体。 虽然您可以手动将 Google 字体排入队列,但对于大多数用户来说,使用插件要容易得多。

如何使用插件安装字体?

让我们以 WP Google 字体为例。 只需从官方 WordPress 存储库安装此插件并打开 Google 字体部分。

WP 谷歌字体

您会在此处看到 Google 字体控制面板。 选择字体并更改各种设置,例如字体样式、应用它的元素等。

选项 2 – 手动安装 WordPress 自定义字体

通过@font-face 指令,您可以将一种或多种字体连接到您的站点。 但这种方法有利也有弊。

优点

  • 通过 CSS,可以连接任意格式的字体:ttf、otf、woff、svg。
  • 字体文件将位于您的服务器上——您将不依赖第三方服务。

缺点

  • 对于每种样式的正确字体连接,您需要注册一个单独的代码。
  • 如果不了解 CSS,您很容易感到困惑。
  保留:更智能的 WooCommerce 购物车恢复

但如果可以的话,这不是一个真正的问题 只需复制完成的代码 以及您需要在哪里指定您的值。

笔记:在开始之前,请务必为您的网站创建一个子主题。 通过这种方式,您可以对您的子主题进行所有编辑,保持您的核心主题完好无损,以便您可以在将来根据需要轻松更新它。

第 1 步:创建“字体”文件夹

在您的子主题中创建一个新的“字体”文件夹: wp-content/themes/your-child-theme/fonts

步骤 2. 将下载的字体文件上传到您的网站

这可以通过主机的控制面板或通过 FTP 来完成。

将所有字体文件添加到新添加的字体文​​件夹中: wp-content/themes/your-child-theme/fonts 你创造的。

步骤 3. 通过子主题样式表导入字体

打开您的子主题的 style.css 文件并将以下代码添加到 CSS 文件的开头(在子主题注释之后):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

在哪里 MyWebFont 是字体的名称,src 属性的值(引号中括号中的数据)是它们的位置(相对链接)。 我们需要分别指定每种样式。

由于我们首先连接的是 normal 样式,因此我们将 font-weight 和 font-style 属性设置为 normal。

Step 4. 添加时 斜体, 写下:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

在一切都相同的地方,只有我们将 font-style 属性附加到斜体。

步骤 5. 要添加粗体字体,请添加以下代码:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

我们将 font-weight 属性设置为粗体。

请记住为每种样式指明字体文件的正确位置。

步骤 6. 要连接粗斜体,请键入以下内容:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

好了,这就是全部?现在您已将四种字体样式连接到您的网站。

但是有一点要注意——这种字体连接在 Internet Explorer 8 中会显示不正确。令人欣慰的是,仍然很少有人在使用 IE8。

为 WordPress 包装自定义字体

用户访问您的网站时首先注意到的是什么? 没错,它的设计! 大多数设计都依赖于正确使用漂亮的字体。 因此,您必须注意网站的字体设计。 添加代码或使用上述插件之一嵌入新的字体样式。 您选择哪种方式取决于您。

确保您在同一个站点上使用的字体不超过两种。 由于您添加到站点的自定义字体越多,站点的速度就越慢。

就这些了,欢迎评论。

我们也很高兴听到您选择哪个选项来将自定义字体添加到您的网站以及您在哪里找到您的字体。

类似文章