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

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

为什么使您的博客使用标准字体感到无聊?让您的博客谈论您充满活力的个性以及您使用各种自定义字体涵盖的主题。自定义字体是一个不错的功能,它使您的博客看起来比其他人更喜欢.


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

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

让我们找出来.

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

当时代新罗马和乔治亚被认为是网站上文本的唯一字体时,日子已经一去不复返了。在过去的几年中,随着Google字体等字体的出现,字体空间已经完全改变。.

如今,Internet上提供了数百种免费字体,信息和培训工具以及设计资源。与Adobe Illustrator,Photoshop和其他经典应用程序不同,默认情况下,WordPress不能完全控制字体。只有某些主题选择支持和使用自定义字体.

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

使用自定义字体的重要性

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

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

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

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

Google字体替代

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

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

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

  1. TemplateMonster —在TemplateMonster市场网站上,您将找到所需的所有Web设计内容。还有许多个人使用的字体和字体包,价格低廉。此外,它们在ONE Web开发套件中提供。该馆藏庞大且富有创意。为了帮助您选择,所有字体都出现在小册子或框架上。每个字体也都带有商业许可.
  2. 我的字体 — MyFonts当前提供世界上最多的字体选择。但是,这里的价格也属于较高部分。因此,如果您预算紧张,可能不适合您.
  3. 字体春天 — Fontspring销售用于商业用途的精美字体。但是在几乎任何家庭中,1-2种可以用于个人目的的免费字体。此外,还有一个带有免费字体的单独部分。该集合是vibran。但是在下载之前,您必须仔细研究特定字体的许可信息。.
  4. Cufonfonts —它也是大量不同字体的集合。选择任意一个,您将看到一个页面,其中包含有关该页面的详细信息。有很多免费字体,它们分为几个部分。 CufonFonts上的分拣系统非常灵活方便。此外,还包括Webfont支持.
  5. 达丰 —另一个可访问的3,500种免费字体的集合。它们中的大多数仅供个人使用。 DaFont的一个不错的功能是分类系统。您可以选择漫画,视频游戏,老式字体或风格化为日文字符的字体.

字体的选​​择非常诱人,因为它们都很漂亮。但您不应选择太多。采用 网站上的字体不超过两种. 这样您的网站外观将保持一致。选择字体后,请确保下载要使用的每种样式的文件(常规,粗体,斜体等).

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

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

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

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

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

如果我们不在乎全局更改,则可以安装WordPress插件来更改您网站上的字体.

自定义字体插件的特征

开源软件具有社区利益的优势,而WordPress也具有这一优势。几个WordPress插件可让您添加自定义字体。如何选择这么多合适的插件?自定义字体插件的功能是什么?

这里有几点要考虑:

  • 能够使用自定义字体
  • 能够使用多种字体
  • 目标标题和组件
  • 奖励:可以从可视编辑器更改字体设置

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

让我们看一下WordPress的一些插件,这些插件可让您上传自定义字体.

自定义字体上传器

自定义字体上传器

该插件可让您下载Google字体并将其应用于博客的各种元素。例如,指向文章或页面的标题或正文.

使用任何字体

使用任何字体

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

WP Google字体

WP Google字体

WP Google Fonts允许您使用Google字体目录。该插件的惊人优势之一是增加了近1000种Google字体。虽然您可以手动将Google字体排入队列,但对于大多数用户而言,使用插件要容易得多.

如何使用插件安装字体?

以WP Google字体为例。只需从官方WordPress存储库安装此插件,然后打开“ Google字体”部分.

WP Google字体

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

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

通过@ font-face指令,您可以将一种或几种字体都连接到您的站点。但是这种方法有其优点和缺点.

优点

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

缺点

  • 为了正确连接每种样式的字体,您需要注册一个单独的代码.
  • 不了解CSS,您很容易感到困惑.

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

注意:开始之前,请确保为您的网站创建一个子主题。这样,您可以对子主题进行所有编辑,而保持核心主题不变,以便将来可以根据需要轻松更新.

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

在您的子主题中,在以下位置创建一个新的“ fonts”文件夹: wp-content /主题/您的孩子主题/字体

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

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

将所有字体文件添加到新添加的fonts文件夹中: wp-content /主题/您的孩子主题/字体 您创建的.

步骤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:正常;
字体样式:正常;
}

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

由于我们首先连接了普通样式,因此我们将font-weight和font-style属性设置为normal.

步骤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:正常;
字体样式:斜体;
}

凡是相同的地方,只有我们将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')格式('woff'),
url('fonts / WebFont-Bold.ttf')format('truetype'),
url('fonts / WebFont-Bold.svg#svgwebfont')format('svg');
font-weight:粗体;
字体样式:正常;
}

我们将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')格式('woff'),
url('fonts / WebFont-Italic-Bold.ttf')format('truetype'),
url('fonts / WebFont-Italic-Bold.svg#svgwebfont')format('svg');
font-weight:粗体;
字体样式:斜体;
}

好了,就是这样��现在,您已经将四种字体样式连接到您的网站.

但是有一点要说–这种字体连接将在Internet Explorer 8中错误地显示。可安慰的是,很少有人还在使用IE8。.

为WordPress包装自定义字体

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

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

就这样,随时发表评论. 

我们也很高兴听到您选择向网站添加自定义字体的选项以及在何处找到您的字体.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map