这篇文章的灵感来自Design Shack的另一篇同类型文章 —— 同样是列举10种常用谷歌字体的组合应用。但是目前谷歌字体库已经增加了不少新字体,所以本文所述字体则是根据我自己所选的新型字体。要掌握如何安装谷歌字体,您可以查看之前所写的这一篇,讲述的是,您可以手动安装谷歌字体,也可以通过插件WP-Google-Fonts来导入谷歌字体。
Lobster Two & Lato

Lobster 是出自Pablo Impallari 之手的第一种字体,而他最近创建的一种字体是 Lobster Two ,也就是Lobster, 不过这种字体倾斜度没那么厉害,用来做标题字体实在漂亮。这里我将它拿来跟Lato 组合使用。Lato 是一种朴素的字体,属于 sans serif 的一种类型,跟Lobster Two 搭配使用,能为Lobster Two 增色不少。
代码
插入到header.php文件中的<head>标签之前:
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab|Muli|Lato|Nobile|Lobster+Two&subset=latin&v2' rel='stylesheet' type='text/css'>
或者
添加到style.css样式表文件中:
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab|Muli|Lato|Nobile|Lobster+Two&subset=latin&v2);
CSS
添加到style.css样式表中:
h1 {
font-family: 'Lobster Two', Georgia, cursive;
font-style: normal;
font-weight: 400;
font-size: 64px;
text-transform: none;
text-decoration: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 0.6;
}
p {
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
text-transform: none;
text-decoration: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.4;
}
下面是另外九种字体的组合应用,使用方法跟上面第一种字体一样。
Terminal Dosis & Caudex

Terminal Dosis 也是属于sans-serif 字体的一种,很漂亮,适合用来做标题字体。这种构造精巧的字体并不适合用于阅读篇幅比较大的文本,但它看起来确实相当美观,特别是跟 serif 字体 Caudex搭配使用的时候,更加抢眼。
<link>链接:
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light|Caudex&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis+Light|Caudex&v2);
Josefin Slab & Ubuntu

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:600|Ubuntu&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:600|Ubuntu&v2);
Stardos Stencil & Muli

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Stardos+Stencil|Muli&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Stardos+Stencil|Muli&v2);
Corben & Varela

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Corben:700|Varela&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Corben:700|Varela&v2);
Limelight & Merriweather

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Varela|Limelight|Merriweather&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Varela|Limelight|Merriweather&v2);
Radley & PT Sans

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Radley|PT+Sans&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Radley|PT+Sans&v2);
Bowlby One SC & Maven Pro

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC|Maven+Pro&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Bowlby+One+SC|Maven+Pro&v2);
Podkova & Mako

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Podkova|Mako&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Podkova|Mako&v2);
Didact Gothic & PT Serif

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic|PT+Serif&v2' rel='stylesheet' type='text/css'>
@import导入:
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic|PT+Serif&v2);
原文:wpmu