如何向 WordPress 添加新字体
您想让您的 WordPress 网站脱颖而出吗？
自定义字体是为您的网站提供您一直渴望的独特外观和感觉的一种方式，即使您使用的主题与无数其他 WordPress 网站完全相同。
在这篇文章中，我将向您展示如何向 WordPress 添加新字体。更好的是，我将向您展示如何从互联网上最受欢迎的两个在线字体库中获取数千种免费的自定义字体：Abode 的 Typekit 和 Google Fonts。
我在哪里可以找到免费的自定义字体？
尽管我将重点介绍 Typekit 和 Google Fonts，但有无数网站提供免费的自定义字体。将这些字体添加到您的网站的过程可能会有所不同，但在本教程中，我将介绍最常用的方法，包括使用插件和编辑您网站的 CSS。到本教程结束时，您将掌握可以应用于大多数自定义字体存储库的技术，即使本教程中没有明确介绍它们。
如果您已经有一个特定的字体，那么值得启动您最喜欢的搜索引擎并搜索自定义字体，然后搜索一些描述您理想字体的词，例如自定义字体 Netflix或自定义字体 Star Wars。
如果您没有特定的字体，那么 Typekit 和 Google Fonts 提供了数千种自定义字体，因此这两个站点应该为您提供了很多选择。但是，如果您已经搜索了 Typekit 和 Google Fonts，但仍然找不到吸引您眼球的字体，那么FontSquirrel、1001 Fonts和FontSpace也是查找自定义字体的好地方。
只是不要得意忘形，因为在您的网站上塞满第三方字体会影响其性能，并且永远在不同字体之间切换的网站往往难以阅读，并且令人不快！
将 Google 字体添加到 WordPress
通常有两种方法可以向 WordPress 添加新字体：使用专用插件，或编辑您网站的 CSS。在下面的部分中，我将介绍这两种方法。
CSS：手动添加自定义 Google 字体
编辑主题的 CSS 是一个多步骤的过程，但它也是导入新字体最通用的方法之一：
前往Google Fonts网站，找到您要使用的字体。然后单击选择此字体链接。
一个家庭选择 弹出现在应该向屏幕的右下角。点击它。
确保 选中嵌入选项卡，并复制提供的嵌入代码。
在单独的选项卡中，登录您的 WordPress 帐户。
- 在 WordPress 的左侧菜单中，导航到外观 > 主题编辑器。
- 打开Select theme to edit 下拉菜单，选择您当前的主题，然后单击Select。
- 在Theme files 菜单中，选择header.php 文件。
- 找到开始
<head>标签，然后将 Google Fonts 嵌入代码直接粘贴到该标签之后。 - 单击更新文件 以完成对主题的编辑。
既然您已将此字体添加到您的网站，您需要定义 WordPress 应在何处使用它，例如，您可能希望将 Google 字体用于您网站的正文或所有h1标题。
- 在 WordPress 的Theme files 菜单中，找到style.css 文件，然后单击它。请注意，在某些主题中style.css 可能存储在CSS 文件夹中。
- 切换回您的 Google 字体选项卡并选择@Import。
- 复制 在 CSS 代码中指定。
切换回您的 WordPress 选项卡并找到代表您要使用此字体的位置的代码部分。例如，如果您想在网站的正文中使用该字体，则需要找到如下所示的一段代码：
body{
margin:0;
padding:0;
line-height:20px;
font-size:13px;
color:#5c5c5c;
font-family: 'Montserrat', sans-serif;
-ms-word-wrap:break-word;
word-wrap:break-word;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}此步骤可能因您的主题和要编辑的文本类型而异。如果您正在努力确定需要修改哪一段代码，请尝试打开style.css 文件并搜索font-family， 因为这将突出显示所有控制如何在您的网站上使用字体的代码。
一旦您确定了正确的代码段，您就需要 用CSS 代码中指定的Google 字体替换字体系列。例如，我在 CSS 代码中指定的是：
font-family: 'Indie Flower', cursive;所以我需要font-family: 'Montserat' 在style.css 文件中进行替换 。这给了我以下内容：
body{
margin:0;
padding:0;
line-height:20px;
font-size:13px;
color:#5c5c5c;
font-family: 'Indie Flower', cursive;
-ms-word-wrap:break-word;
word-wrap:break-word;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}修改代码后，单击“更新文件”保存更改。刷新您的 WordPress 网站，它现在应该使用您的新字体。请注意，如果刷新后字体没有更改，则您可能需要清除缓存或在隐身选项卡中查看您的网站。
使用 Google 插件添加自定义字体
由于每个 WordPress 主题都是独一无二的，因此编辑主题的 CSS 文件有时是一项挑战。
如果您正在努力确定需要编辑哪一段代码，或者您只是不喜欢深入研究网站 CSS 的想法，那么您可以使用 Easy Google Fonts 插件导入 Google 字体：
- 在 WordPress 的左侧菜单中，选择Plugins > Add New。
- 搜索Easy Google Fonts插件，当它出现时选择Install 然后选择Activate。
- 接下来，导航到外观 > 自定义。
- 您现在可以访问一个新的排版 项目。点击它。
- 选择 默认排版。
滚动侧面菜单，直到找到要编辑的文本部分，例如Heading 1 或Paragraphs，然后打开Font Family 下拉菜单并选择要使用的 Google 字体。
选择字体后，您可以使用外观 和定位 选项卡中的设置对其进行自定义，例如您可能想要更改字体的颜色、大小或间距。如果您对新字体感到满意，请选择“发布”。
您的网站现在应该更新以使用这种新字体。
使用 Typekit 添加自定义字体
Google Fonts 并不是您可以访问免费自定义字体的唯一地方。让我们看看如何使用 CSS 从 Adobe 的 Typekit 存储库中添加任何字体：
- 转到Typekit 网站并注册一个帐户。
- 浏览 Typekit 库，并找到要添加到 WordPress 网站的字体。
- 单击“添加到 Web 项目”按钮。
- 为您的项目指定一个描述性名称，然后选择Save。
- 将激活字体 滑块推入打开 位置。
您现在需要将此字体的嵌入代码复制/粘贴到您网站的<head>标签中。要获取嵌入代码，请导航到我的 Adobe 字体 > Web 项目或直接访问Web 项目页面。
- 找到提供的嵌入代码并复制它——没有任何
<style>标签。 - 在新选项卡中，登录您的 WordPress 帐户。
- 在 WordPress 的左侧菜单中，选择外观 > 主题编辑器。
- 打开Select theme to edit 下拉菜单，选择您当前使用的主题，然后点击Select。
- 在Theme files 菜单中，找到header.php 文件并单击它。
- 找到开始
<head>标签，将嵌入代码直接粘贴在该标签之后。 - 单击更新文件。
- 快速返回 Typekit 选项卡，找到以下链接：如果您想在 HTML 电子邮件中使用字体，请使用 @import 链接。选择此链接，然后复制提供的导入代码。
- 轻弹回 WordPress。在主题文件 菜单中，选择 style.css。
- 将嵌入代码粘贴到style.css 文件的开头。
单击更新文件保存对主题的更改 。
现在，您需要找到定义要更改的字体的代码，并更新它以引用您的 Typekit 字体。
此过程将根据您使用的主题和要更新的文本而有所不同，但您通常需要完成以下步骤：
- 在 WordPress 的主题文件菜单中，选择style.css文件。
- 找到需要更新的代码段；再次搜索短语font-family可能会有所帮助， 因为这将突出显示您主题的所有字体相关代码。
- 确定正确的代码部分后，您将需要新 Typekit 字体的 CSS。在新选项卡中，转到 Typekit 的Active Fonts部分（或导航到My Adobe Fonts > Active Fonts。）
- 找到您要在网站上使用的字体并单击它。
- 滚动到字体页面的底部；该 如何使用 部分应包含一个 网页 代码。复制 字体系列 部分。
- 切换回您的 WordPress 选项卡，并将font-family 行替换为您刚刚复制的行。
- 如果您对更改感到满意，请单击更新文件。
检查您的网站；它现在应该使用你的新字体了！
结论
在本教程中，我向您展示了如何使用在线提供的无穷无尽的免费字体来自定义任何 WordPress 主题。
如果您一直在关注，那么您现在可以从整个 Google Fonts 和 Typekit 库中进行选择。但是，如果您想从 Adobe 或 Google 以外的其他人下载字体，那么您应该能够通过使用本文中概述的说明找到该字体的嵌入代码并将其粘贴到您的 WordPress 主题文件中来获得类似的结果。许多大型字体存储库也有专用插件，可以更轻松地将字体添加到您的网站，因此始终值得检查是否有可用的插件。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
