wordpress谷歌字体

Google fonts are amazing free resource for web designers. In WPBv4, we have started using a popular Google Font combination: Oswald and Lora. Some of our users have asked us how to add Google Web fonts in WordPress themes. If you remember, we showed how to add Google fonts in WordPress Post Editor. In this article, we will show you how to add Google Web Fonts in your WordPress themes the RIGHT way, optimized for performance.

Google字体是Web设计人员的绝佳免费资源。 在WPBv4中 ，我们开始使用一种流行的Google字体组合：Oswald和Lora。 我们的一些用户问我们如何在WordPress主题中添加Google Web字体。 如果您还记得，我们展示了如何在WordPress Post Editor中添加Google字体 。 在本文中，我们将向您展示如何以正确的方式在WordPress主题中添加Google Web字体，并对其性能进行了优化。

查找您喜欢的Google网络字体 (Find the Google Web Fonts that You Like)

First thing you need to do is find a Google font that you like. Head on over to Google fonts and browse through the library. When you find the font that you like, click on the “Quick-use” button.

您需要做的第一件事就是找到您喜欢的Google字体。 转到Google字体并浏览库。 找到所需的字体后，单击“快速使用”按钮。

Once you click the quick-use button, you will be taken to a new page. Scroll down till you see the usage instruction box with code that you can add to your website.

单击快速使用按钮后，将带您进入新页面。 向下滚动，直到看到用法说明框，其中包含可以添加到网站的代码。

You will see that there are three different tabs for adding the font to your site. The first one is the standard and recommended method to add Google fonts to your site. The second tab uses the @import CSS method, and the last tab utilizes the JavaScript method.

您将看到有三个不同的选项卡，用于将字体添加到您的站点。 第一种是将Google字体添加到您的网站的标准和推荐方法。 第二个选项卡使用@import CSS方法，最后一个选项卡使用JavaScript方法。

We will show you how to use each of these methods and what are there pros and cons.

我们将向您展示如何使用这些方法中的每一种以及优点和缺点。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

在WordPress主题中添加Google Web字体 (Adding Google Web Fonts in WordPress Themes)

We have mostly seen folks using the first two methods.

我们通常看到人们使用前两种方法。

The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this:

最简单的方法是打开主题的style.css文件并粘贴在@import选项卡中获得的字体代码，如下所示：

@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

You can also combine multiple font requests into one. Here is how you would do it:

您还可以将多个字体请求组合为一个。 这是您的操作方式：

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

这种方法超级简单，但不是将Google字体添加到WordPress网站的最佳方法。 使用@import方法会阻止并行下载，这意味着浏览器将等待导入的文件完成下载，然后才开始下载其余内容。

If you MUST use @import, then at least combine multiple requests into one.

如果必须使用@import，则至少将多个请求合并为一个。

性能优化的添加Google Web字体的方法 (Performance Optimized Method of Adding Google Web Fonts)

The best way of adding Google fonts is by using the Standard method which utilizes the link method instead of the import method. Simply take your font URL that you got from step 1. If you are adding multiple fonts, then you can combine the two fonts with a | character. Then place the code in your theme’s head section.

添加Google字体的最佳方法是使用标准方法，该方法利用链接方法而不是导入方法。 只需使用从步骤1中获得的字体URL。如果要添加多个字体，则可以将两个字体与|组合。 字符。 然后将代码放在主题的头部。

You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:

您很可能必须编辑header.php文件，并将以下代码粘贴到主样式表上方。 该示例如下所示：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

Basically the goal is to put the font request as early as possible. According to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t render anything on the page until the font file is done downloading.

基本上，目标是尽早提出字体请求。 根据Google Web Fonts博客的说法，如果在@ font-face声明之前有一个脚本标记，则Internet Explorer在字体文件下载完成之前不会在页面上呈现任何内容。

Once you have done that, you can simply start using it in your theme’s CSS file like this:

完成此操作后，您可以像这样在主题CSS文件中开始使用它：

h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}

Now there are a lot of theme frameworks and child themes out there. It is NOT recommended to modify your parent theme’s files specially if you are using a theme framework because your changes will be overridden the next time you update that framework. You will need to utilize the hooks and filters presented to you by that parent theme or framework to add Google fonts properly in your child themes.

现在有很多主题框架和子主题 。 如果使用主题框架，则不建议您特别修改父主题的文件，因为下次您更新该框架时，所做的更改将被覆盖。 您将需要利用该父主题或框架提供给您的挂钩和过滤器，以在您的子主题中正确添加Google字体。

在WordPress中适当地使Google字体入队 (Properly Enqueuing Google Fonts in WordPress)

Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file or a site specific plugin.

将Google字体添加到WordPress网站的另一种方法是将字体放入主题的functions.php文件或特定于站点的插件中 。

function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Don’t forget to replace the font link with your own.

不要忘记用自己的字体替换字体链接。

使用JavaScript加载Google字体 (Loading Google Fonts Using JavaScript)

For this method you will need to copy the code in the JavaScript tab in Google fonts usage instructions section. You can paste this code in your theme or child theme’s header.php file immediately after <head> tag.

对于这种方法，您需要将代码复制到Google字体使用说明部分JavaScript标签中。 您可以在<head>标记后立即将此代码粘贴到主题或子主题的header.php文件中。

Our last tip on using Google Web Fonts on your site would be to don’t load fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.

关于在您的网站上使用Google网络字体的最后一个技巧是不要加载不会使用的字体。 例如，如果您只想要粗体和正常的粗细，则不要添加所有其他样式。

We hope that this article helped you add Google Web Fonts in your WordPress themes the right way, so your site can load fast. You may also want to check out our guide on how to add Typekit fonts in WordPress.

我们希望本文能帮助您以正确的方式在WordPress主题中添加Google Web字体，以便您的网站能够快速加载。 您可能还需要查看有关如何在WordPress中添加Typekit字体的指南。

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-add-google-web-fonts-wordpress-themes/

wordpress谷歌字体