wordpress自定义_如何在WordPress中添加自定义字体
wordpress自定义
Do you want to add custom fonts in WordPress? Custom fonts allow you to use beautiful combination of different fonts on your website to improve typography and user experience.
是否要在WordPress中添加自定义字体？ 自定义字体使您可以在网站上使用不同字体的精美组合，以改善版式和用户体验。
Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase time users spend on your website.
自定义字体除了看起来不错之外，还可以帮助您提高可读性，创建品牌形象并增加用户在您的网站上花费的时间。
In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 @Font-Face method.
在本文中，我们将向您展示如何使用Google Fonts，TypeKit和CSS3 @ Font-Face方法在WordPress中添加自定义字体。
Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and use them across your website. We’ll also show you how to properly load them without slowing down your website.
注意：加载太多字体会降低您的网站速度。 我们建议选择两种字体并在您的网站上使用它们。 我们还将向您展示如何正确加载它们而不降低您的网站速度。
Before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts that you can use.
在介绍如何在WordPress中添加自定义字体之前，让我们看一下如何查找可以使用的自定义字体。
如何查找自定义字体以在WordPress中使用 (How to Find Custom Fonts to Use in WordPress)
Fonts used to be expensive, but not any more. There are many places to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com.
字体曾经很昂贵，但现在已经不多了。 有很多地方可以找到很棒的免费网络字体，例如Google Fonts ， Typekit ， FontSquirrel和fonts.com 。
If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.
如果您不知道如何混合和匹配字体，请尝试使用字体对 。 它可以帮助设计师将漂亮的Google字体配对在一起。
As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.
在选择字体时，请记住使用过多的自定义字体会降低网站速度。 这就是为什么您应该选择两种字体并在整个设计中使用它们的原因。 这还将为您的设计带来一致性。
影片教学 (Video Tutorial)
If you don’t like the video or prefer the written guide, then please continue reading.
如果您不喜欢该视频或偏爱书面指南，请继续阅读。
从Google字体在WordPress中添加自定义字体 (Adding Custom Fonts in WordPress from Google Fonts)
Google Fonts is the largest, free, and most commonly used font library among website developers. There are multiple ways you can add and use Google Fonts in WordPress.
Google字体是网站开发人员中最大，免费和最常用的字体库。 您可以通过多种方式在WordPress中添加和使用Google字体。
方法1：使用简易Google字体插件添加自定义字体 (Method 1: Adding Custom Fonts Using Easy Google Fonts Plugin)
If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners.
如果您要在网站上添加和使用Google字体，则此方法是迄今为止最简单的方法，建议初学者使用。
First thing you need to do is install and activate the Easy Google Fonts plugin. For more details, see our step by step guide on how to install a WordPress plugin.
您需要做的第一件事是安装并**Easy Google Fonts插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
Upon activation, you can go to Appearance » Customizer page. This will open the live theme customizer interface where you’ll see the new Typography section.
**后，您可以转到外观»定制程序页面。 这将打开实时主题定制器界面，您将在其中看到新的“版式”部分。
Clicking on Typography will you show different sections of your website where you can apply Google Fonts. Simply click on ‘Edit Font’ below the section you want to edit.
单击“版式”，将显示网站的不同部分，可在其中应用Google字体。 只需单击要编辑部分下面的“编辑字体”。
Under the font family section, you can choose any Google Font you want to use on your website. You can also choose font style, font size, padding, margin, and more.
在字体系列部分下，您可以选择要在网站上使用的任何Google字体。 您还可以选择字体样式，字体大小，填充，边距等。
Depending on your theme, the number of sections here could be limited and you may not be able to directly change font selection for many different areas of your website.
根据您的主题，此处部分的数量可能会受到限制，并且您可能无法直接更改网站许多不同区域的字体选择。
To fix this, the plugin also allows you to create your own controls and use them to change fonts on your website.
为了解决这个问题，该插件还允许您创建自己的控件，并使用它们来更改网站上的字体。
First, you need to visit Settings » Google Fonts page and provide a name for your font control. Use something that helps you quickly understand where you will be using this font control.
首先，您需要访问设置»Google字体页面，并提供字体控件的名称。 使用有助于您快速了解将在何处使用此字体控件的内容。
Next, click on the ‘Create font control’ button and then you will be asked to enter CSS selectors.
接下来，单击“创建字体控件”按钮，然后将要求您输入CSS选择器。
You can add HTML elements you want to target (for instance, h1, h2, p, blockquote) or use CSS classes.
您可以添加要定位HTML元素(例如h1，h2，p，blockquote)或使用CSS类。
You can use Inspect tool in your browser to find out which CSS classes are used by the particular area you want to change.
您可以在浏览器中使用检查工具来查找要更改的特定区域使用CSS类。
Now click on the ‘Save font control’ button to store your settings. You can create as many font controllers as you need for different sections of your website.
现在，单击“保存字体控制”按钮以存储您的设置。 您可以根据需要在网站的不同部分创建任意数量的字体控制器。
To use these font controllers, you need to head over to Appearance » Customizer and click on the Typography tab.
要使用这些字体控制器，您需要转到外观»定制程序 ，然后单击“版式”选项卡。
Under Typography, you will now see a ‘Theme Typography’ Option as well. Clicking on it will show your custom font controls you created earlier. You can now just click on the edit button to select the fonts and appearance for this control.
在“版式”下，您现在还将看到“主题版式”选项。 单击它会显示您之前创建的自定义字体控件。 现在，您只需单击编辑按钮即可选择该控件的字体和外观。
Don’t forget to click on the save or publish button to save your changes.
不要忘记单击“保存”或“发布”按钮以保存您的更改。
方法2：在WordPress中手动添加Google字体 (Method 2: Manually Add Google Fonts in WordPress)
This method requires you to add code to your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.
此方法要求您将代码添加到WordPress主题文件中。 如果您以前没有做过，请参阅有关如何在WordPress中复制和粘贴代码的指南。
First, visit the Google fonts library and select a font that you want to use. Next, click on the quick use button below the font.
首先，访问Google字体库，然后选择要使用的字体。 接下来，单击字体下方的快速使用按钮。
On the font page, you’ll see the styles available for that font. Select the styles that you want to use in your project and then click on the sidebar button at the top.
在字体页面上，您将看到该字体可用的样式。 选择要在项目中使用的样式，然后单击顶部的侧边栏按钮。
Next, you will need to switch to the ‘Embed’ tab in the sidebar to copy the embed code.
接下来，您将需要切换到侧边栏中的“嵌入”标签以复制嵌入代码。
There are two ways you can add this code to your WordPress site.
您可以通过两种方式将此代码添加到WordPress网站。
First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.
首先，您可以简单地编辑主题的header.php文件，并将代码粘贴到<body>标记之前。
However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.
但是，如果您不熟悉WordPress中的代码编辑，则可以使用插件添加此代码。
Simply install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.
只需安装并**“ 插入页眉和页脚”插件即可。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.
**后，转到“设置”»“插入页眉和页脚”页面，然后将嵌入的代码粘贴到“页眉中的脚本”框中。
Don’t forget to click on the Save button to store your changes. The plugin will now start loading the Google Font embed code on all pages of your website.
不要忘记单击“保存”按钮来存储您的更改。 现在，该插件将开始在您网站的所有页面上加载Google字体嵌入代码。
You can use this font in your theme’s stylesheet like this:
您可以在主题的样式表中使用此字体，如下所示：
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
For more detailed instructions see our guide on how to add Google fonts in WordPress themes.
有关更多详细说明，请参阅我们的指南，了解如何在WordPress主题中添加Google字体 。
使用Typekit在WordPress中添加自定义字体 (Adding Custom Fonts in WordPress Using Typekit)
Typekit by Adobe Fonts is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid subscription as well as a limited free plan that you can use.
Adobe Fonts的Typekit是另一种免费的高级资源，可用于设计项目中的出色字体 。 他们有付费订阅以及可以使用的有限免费计划。
Simply signup for an Adobe Fonts account and visit the browse fonts section. From here you need to click on the </> button to select a font and create a project.
只需注册一个Adobe Fonts帐户，然后访问“浏览字体”部分。 在这里，您需要单击</>按钮以选择一种字体并创建一个项目。
Next, you’ll see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS.
接下来，您将看到带有项目ID的嵌入代码。 它还将向您展示如何在主题CSS中使用字体。
You need to copy and paste this code inside the <head> section of your website.
您需要将此代码复制并粘贴到网站的<head>部分中。
There are two ways you can add this code to your WordPress site.
您可以通过两种方式将此代码添加到WordPress网站。
First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.
首先，您可以简单地编辑主题的header.php文件，并将代码粘贴到<body>标记之前。
However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.
但是，如果您不熟悉WordPress中的代码编辑，则可以使用插件添加此代码。
Simply install and activate the Insert Headers and Footers plugin.
只需安装并**“ 插入页眉和页脚”插件即可。
Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.
**后，转到“设置”»“插入页眉和页脚”页面，然后将嵌入的代码粘贴到“页眉中的脚本”框中。
That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:
就是这样，您现在可以使用在WordPress主题的样式表中选择的Typekit字体，如下所示：
h1 .site-title {
font-family: gilbert, sans-serif;
}
For more detailed instructions check out our tutorial how to add awesome typography in WordPress using Typekit.
有关更多详细说明，请查看我们的教程如何使用Typekit在WordPress中添加很棒的排版 。
使用CSS3 @ font-face在WordPress中添加自定义字体 (Adding Custom Fonts in WordPress Using CSS3 @font-face)
The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.
在WordPress中添加自定义字体的最直接方法是使用CSS3 @font-face方法添加字体。 此方法使您可以使用网站上喜欢的任何字体。
First thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.
您需要做的第一件事是以网络格式下载所需的字体。 如果您的字体没有Web格式，则可以使用FontSquirrel Webfont generator进行转换。
Once you have the webfont files, you would need to upload it on your WordPress hosting server.
有了webfont文件后，您需要将其上传到WordPress托管服务器上。
The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory.
上载字体的最佳位置是在主题或子主题目录中的新“字体”文件夹中。
You can use FTP or File Manager of your cPanel to upload the font.
Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:
上载字体后，需要使用CSS3 @ font-face规则将字体加载到主题的样式表中，如下所示：
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Don’t forget to replace the font-family and URL with your own.
不要忘记用自己的字体和URL替换字体。
After that you can use that font anywhere in your theme’s stylesheet like this:
之后，您可以在主题样式表中的任何位置使用该字体，如下所示：
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Loading fonts directly using CSS3 @font-face is not always the best solution. If you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.
直接使用CSS3 @ font-face加载字体并不总是最好的解决方案。 如果您使用的是Google Fonts或Typekit中的字体，那么最好直接从其服务器提供字体以实现最佳性能。
That’s all, we hope this article helped you add custom fonts in WordPress. You may also want to checkout our guide on how to use icon fonts in WordPress and how to change the font size in WordPress.
仅此而已，我们希望本文能帮助您在WordPress中添加自定义字体。 您可能还需要查看有关如何在WordPress中使用图标字体以及如何在WordPress中更改字体大小的指南 。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress****。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
wordpress自定义