You are here:  Home » PHP » 如何在WordPress中添加Google Web字体主题为“正确”方式

Google字体是网页设计师的绝佳免费资源。在WPBv4中,我们已经开始使用流行的Google字体组合:OswaldLora。我们的一些用户问我们如何在WordPress主题添加Google Web字体。如果您还记得,我们展示了如何在WordPress Post Editor中添加Google字体。在本文中,我们将向您展示如何在WordPress主题中添加Google Web Fonts正确的方法,针对性能进行了优化

找到您喜欢的Google Web字体

您需要做的第一件事是找到您喜欢的Google字体。继续浏览Google字体并浏览库。找到喜欢的字体后,单击“快速使用”按钮。Ànniǔ.

Quick use fonts from Google Fonts

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

Google font embed code

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

我们将向您展示如何使用这些方法以及有哪些优点和缺点。

视频教程

订阅WPBeginner

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

在WordPress主题中添加Google Web字体

我们大多数人都使用前两种方法。

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

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

您还可以将多个字体请求合并为一个。您将如何做到这一点:

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

这种方法非常简单,但这不是将Google字体添加WordPress网站的最佳方式。使用@import方法阻止并行下载,这意味着浏览器将在开始下载其余内容之前等待导入的文件完成下载。

如果你必须使用@import,那么至少要将多个请求组合成一个。

添加Google Web字体的性能优化方法

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

您很可能需要编辑您的header.php文件文件,并将以下代码粘贴到主样式表上方。示例如下所示:

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

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

完成后,您可以直接在主题的CSS文件中使用它,如下所示:

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

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

WordPress中正确排队Google字体

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

function wpb_add_google_fonts() {

wp_enqueue_style( "wpb-google-fonts", "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300", false ); 
}

add_action( "wp_enqueue_scripts", "wpb_add_google_fonts" );

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

使用JavaScript加载Google字体

对于此方法,您需要在Google字体使用说明部分的JavaScript标签中复制代码。您可以在&lt; head&gt;之后立即将此代码粘贴到主题或子主题的header.php文件中标签。

我们在您的网站上使用Google Web Fonts的最后一个提示是不加载您不会使用的字体。例如,如果您只想要粗体和正常重量,则不要添加所有其他样式。

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