在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。
前言
文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。 说到字体，我们首先会想到 CSS 里面的 font，例如：
<html>
<head>
<style>
p { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<p>some text</p>
</body>
</html>
在这段 HTML 代码中为
标签定义了字体，当浏览器解析<p>some text</p>标签时，首先会在系统中查找 Arial 这个字体，如果找不到，就找 Helvetica 字体，如果还是找不到，就会查找浏览器默认的 sans-serif(非衬线)字体，最后把文字渲染出来。
什么是安全字体
安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子：
font-family: Arial, Helvetica, sans-serif;
这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。
在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。
除了 Arial，常见的安全字体还有：
Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用广泛，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：
font-family: Verdana, Geneva, sans-serif;
Times New Roman 字体，它是最常用的 serif 字体，是浏览器默认的字体。小号字的易读性也很差。CSS 写法：
font-family: 'Times New Roman', Times, serif;
@font-face 标签简介
@font-face 被列为了 CSS3 的一项新特性，其实它并不是什么新鲜技术，它最早出现在 CSS2 的规范定义中，但是在 CSS2.1 中又被删除，现在被正式列入 CSS3。目前主流的浏览器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能够支持这个属性，所以不用担心会有浏览器兼容性问题。
@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。 随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。
网络字体的优点有很多：
1.使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；
2.可以被搜索引擎辨认；
3.不像图片每次需要重新生成，添加删除更方便。
如何使用 Google Fonts API
Google Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）。
在您的网页中添加字体链接。
如果确认使用该字体， 在网页下方的"Collection"中，点击"Use"按钮，在接下来的页面中，您将看到详细的说明，包括字体链接和如何将字体添加到您的网页中。
有三种方式来添加字体链接：
Standard 方式：
<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Condiment'>
@import 方式：
@import url(http://fonts.googleapis.com/css?family=Condiment);
JavaScript 方式：
（通过添加动态脚本并执行来导入字体，代码省略） 下一步定义在那个标签上使用该字体，例如：在<class=“myheader”>标签上使用，
.myheader {font-family: 'Condiment', cursive;}
清单 1.测试页面代码
<html>
<head>
<link rel="stylesheet" type="text/css"
href='http://fonts.googleapis.com/css?family=Condiment'>
<style>
.myheader {
font-family: Condiment, cursive;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="myheader"> Test my own text !</div>
</body>
</html>
优化字体包加载
如果您不是大范围的在网页中使用 Google 字体，只是在标题或 logo 里使用，那么可以在 url 里添加 text 参数，来限制加载的字体包的大小，最高能缩减 90%左右的大小，以此来节约下载流量。例如：
http://fonts.googleapis.com/css?family= Condiment'&text=Hello
这样，您只会下载 h，e，l，o 这四个字母的字体，大大缩小了字体包的大小。