如何正确地为wordpress添加Goolge字体
Goolge的网页字体是网页设计中的一大免费资源，可以有效地统一不同操作系统下的字体显示。在这篇文章中，我将介绍如何正确地为WordPress主题添加Google网页字体，以提升网页加载速度。
确定自己喜欢的Goolge字体
首先前往 http://www.google.com/fonts， 在Google的字体库中寻找一两款美观的字体，比如我找到的是Alegreya Sans字体。然后点击Quick Use按钮。
点击Quick Use按钮后，在新的页面里下拉到第三栏。可以看到，第三栏有3个标签，每个标签下面都有一行代码。第一个标签下面的代码是我们推荐使用的代码，它使用 HTML link标签来加载Goolge字体的CSS文件。第二个标签下面的代码使用CSS ＠import来导入Google字体的CSS文件，第三个标签的代码使用JavaScript来加载CSS文件。
我将告诉你如何分别使用这三种方法以及每种方法的好处和坏处。
使用HTML link标签加载外部CSS样式
第一种方法，也是标准的、推荐使用的方法。这种方法使用HTML的link标签来加载外部CSS样式。我们需要把Goolge在第三栏提供是 link这一行代码复制下来，然后添加到WordPress主题文件夹下面的header.php文件中。如果你要添加两种以上的字体，那么可以在这行代 码中用“｜”符号同时添加这两种字体。将这行代码粘贴到header.php文件中其他link标签的上面。如下
保存header.php文件后，我们就可以在CSS文件中使用Goolge字体了，比如我们可以在style.css文件中将h1标题行的字体设为Alegeraya Sans
h1{
font-size:30px;
font-family: 'Alegreya Sans', sans-serif;
}
如果你使用子主题，那么要将link这一行代码粘贴到子主题下面的header.php文件。
第二种方法：CSS ＠import
打开WordPress主题文件夹下面的style.css文件，将Goolge的@import代码粘贴到文件的开头。@import代码必须要在其他任何CSS规则的前面。如果你要添加两种以上的字体，那么可以在这行代码中用“｜”符号同时添加这两种字体。如下：
/*
Theme Name: profitmag
Theme URI: http://www.linuxdashen.com/
Description: profitmag child theme
Author: Tom and Jerry
Author URI: http://www.linuxdashen.com
Template: profitmag
Version: 1.0.0
*/
@import url("../profitmag/style.css");
@import url(https://fonts.googleapis.com/css?family=Quantico|PT+Sans);
.entry-content p > a {
border-bottom: 1px solid #336699;
color: #336699;
}
.....
.....
使用@import的一个坏处是浏览器必须要先下载完@import后面的CSS样式后才能下载下面的CSS，所以不推荐使用这种方法。
第三种方法：使用JavaScript加载字体
打开主题或子主题的header.php文件，将Google的JavaScript代码粘贴到文件中<head>标签的下一行。如下：
<html <?php language_attributes(); ?>>
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'PT+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
