怎样设置文件字体添加到您的WordPress网站

花销的字体并不是我们追求的，可是如出一辙的字体也并非我们推许的。在网站设计的时间，如在主要的地方，使用差异于其他地方的字体，会让我们的网站显得差异一样平常，从而更让用户喜欢。凭证研究显示，如在问题部门或行动招呼，使用差异于正文的字体，可以吸引用户的注重，从而提高转化率。这些差异的字体，往往需要我们使用自界说字体，下文我们从使用自界说的字体缘故原由和怎样使用自界说字体方面谈谈怎样将自界说字体添加到您的WordPress网站。

为什么要使用自界说字体？

Times New Roman 和 Georgia或宋体作为网站上文本的唯一字体的时代已经已往了。在已往的几年中，随着Google字体等字体的泛起，字体空间已经完全改变。

现在，Internet上提供了数百种免费字体，信息和培训工具以及设计资源。与Adobe Illustrator，Photoshop和其他经典应用法式差异，默认情形下，WordPress不能完全控制字体。仅某些主题选择支持和使用自界说字体。

因此，在本文中，您将学习怎样找到合适的自界说字体以及怎样在WordPress网站中使用它们。

使用自界说字体的主要性

您问为什么要更改字体，缩进单词，行间距，字母间距或字体饱和度？只管云云，一些研究证实版式可以提高阅读明确力。

在很洪流平上取决于字体的结构。在有意识和潜意识的层面上，每小我私人都通过设计评估网页的内容。

字体设计会影响读者，纵然他们不注重也是云云。放弃字体设计意味着放弃开发自己！读者的心情取决于此。字体要么使阅读更容易，要么迫使用户脱离页面。

所有Web浏览器均包罗一组默认字体。这意味着，若是未在页面的CSS中指定字体，则将使用尺度版本。您始终可以使用默认字体，可是它们会使用户的事情重大化。这就是为什么必须使用自界说字体的缘故原由。若是主题没有为您提供更改字体的选项，则许多网站和工具都可以提供资助。

Google字体替换

你们中许多人都知道免费的Google字体。在许多其他网站上，您都可以找到漂亮的字体。其中一些免费供小我私人使用。若是需要商业用途，则需要允许证。Google字体和Adobe Edge字体是免费的。谷歌字体现在提高的思源字体，部门站酷中文字体都可以到达在线使用的要求。虽然若是需要更奇异的字体，可以参考下面的网站上的字体资源。

以下是一些其他免费和商业使用字体的资源：

1. TemplateMonster—在TemplateMonster市场网站上，您将找到所需的所有Web设计内容。尚有许多小我私人使用的字体和字体包，价钱低廉。另外，它们在ONE Web开发工具包中先容。该荟萃是重大的和缔造性的。为了资助您选择，所有字体都泛起在小册子或框架上。每个字体也都带有商业允许。
2. MyFonts— MyFonts当条件供天下上最多的字体选择。可是，这里的价钱也属于高端市场。因此，若是您预算主要，那么可能不适合您。
3. FontSpring— Fontspring销售用于商业用途的细腻字体。可是在险些任何字体中，1-2种可以用于小我私人目的的免费字体。此外，尚有一个带有免费字体的单独部门。该荟萃是vibran。可是，在下载之前，您必须仔细研究特定字体的允许信息。
4. Cufonfonts—它也是种种差异字体的普遍荟萃。选择任何一个，您将看到一个包罗有关它的详细信息的页面。有许多免费字体，它们分为几个部门。CufonFonts上的分拣系统很是无邪利便。此外，还包罗Webfont支持。
5. Dafont-另一种可会见的3,500种免费字体荟萃。它们中的大多数仅供小我私人使用。DaFont的一个不错的功效是分类系统。您可以选择漫画，视频游戏，老式字体或气焰气焰化为日文字符的字体。

字体的选​​择很是诱人，由于它们都很漂亮。但您不应选择太多。在网站上使用不凌驾两种字体。这样您网站的外观将保持一致。选择字体后，请确保下载要使用的每种样式的文件（通俗，粗体，斜体等）。

现在，您已经为网站选择了合适的字体，让我们相识怎样添加它。

怎样将自界说字体添加到WordPress

有几种要领可以将字体添加到WordPress网站：

1. 插件：在这种情形下，将使用差异的WordPress插件来简化此历程。
2. 手动：使用此要领，您需要将下载的字体上载到站点并编辑CSS文件。
3. 主题：许多盛行的主题都包罗用于自界说字体的内置选项（请注重-我们将不先容此选项，由于该历程会因您所使用的主题而异。）

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

若是我们不体贴全局更改，则可以安装WordPress插件来更改您网站上的字体。

自界说字体插件的特征

开源软件具有社区利益的优势，而WordPress也具有这一优势。几个WordPress插件可让您添加自界说字体。怎样选择这么多合适的插件？自界说字体插件的功效是什么？

这里有几点要思量：

• 能够使用自界说字体
• 能够使用多种字体
• 目的问题和组件
• 优势：能够从可视编辑器更改字体设置

就这样。列表中的第一个功效很是主要。您始终可以从DaFont，Font Squirrel等站点下载字体，可是您需要能够将它们上传到WordPress。

让我们看一下WordPress的一些插件，这些插件可让您上传自界说字体。

自界说字体上传器

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

使用任何字体

这是一个WordPress插件，为您提供了利便的界面来下载字体并直接通过可视化编辑器使用它们。WordPress可视编辑器可以自动更改任何文本的字体。该插件提供了几个功效，这使得添加自界说字体的历程越发易于治理。

WP Google字体

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

怎样使用插件安装字体？

让我们以WP Google字体为例。只需从官方WordPress存储库安装此插件，然后打开“ Google字体”部门即可。

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

选项2 –手动安装WordPress自界说字体

通过@ font-face指令，您可以将一种或几种字体都毗连到您的站点。可是这种要领有其优点和弱点。

优点：

• 通过CSS，您可以毗连任何名堂的字体：ttf，otf，woff，svg。
• 字体文件将位于您的服务器上–您将不依赖于第三方服务。

弱点：

• 为了准确毗连每种样式的字体，您需要注册一个单独的代码。
• 不相识CSS，您很容易感应疑心。

可是，若是您可以简朴地复制完成的代码并需要在其中指定值，那么这并不是一个真正的问题。

步骤1：建设一个“字体”文件夹

在您的子主题中，在以下位置建设一个新的“字体”文件夹：wp-content / themes / your-child-theme / fonts

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

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

将所有字体文件添加到新添加的字体文​​件夹中：wp-content / themes / your-child-theme /您建设的字体。

步骤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属性的值（带引号的括号中的数据）是其位置（相对链接）。我们需要划分指定每种样式。

由于我们首先毗连了通俗样式，以是我们将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: 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中显示不准确。

为WordPress包装自界说字体

用户会见您的网站时首先注重到的是什么？对，它的设计！大多数设计依赖于准确使用漂亮的字体。因此，您必须注重网站的字体设计。添加代码或使用上述插件之一嵌入新的字体样式。选择哪种方式取决于您。

确保在统一站点上使用的字体不凌驾两种。由于添加到站点的自界说字体越多，站点的速率就变得越慢。