在我们的样式表里面使用在线字体，首先要指定字体文件的名字，然后是它的位置。我们先从Font Squirrel下载Aller Light字体文件。Aller Light是本书英文原版的正文使用的字体。

@font-face { 
font-family : 'Aller Light'; 
src : url('fonts/aller_std_lt.woff2') format('woff2'); }

上个例子中，我们只使用了WOFF2格式，理想情况下这就足够了。令人伤心的是，现实世界并不是这样的，即使今天，某些最现代的浏览器也不支持WOFF2，比如iOS和OS X上面的Safari浏览器。为了能使用，我们不得不加入WOFF格式，绝大部分浏览器都支持这个格式，除了Opera Mini。两个格式使用逗号分隔开。

@font-face { 
font-family : 'Aller Light'; 
src : url('fonts/aller_std_lt.woff2')     format('woff2'),  
url('fonts/aller_std_lt.woff') format('woff'); }

为了广泛支持老旧的浏览器，安卓还有iOS系统的Safari浏览器，我们在声明中加入TrueType格式字体。

@font-face { 
font-family : 'Aller Light'; 
src : url('fonts/aller_std_lt.woff2') format('woff2'), 
url('fonts/aller_std_lt.woff') format('woff'), 
url('fonts/aller_std_lt.ttf') format('truetype'); }

为了能够完全支持font-face， 包括那些老旧的微软IE浏览器，我们也需要把EOT格式加入到声明中。

@font-face { 
font-family : 'Aller Light'; 
src: url('aller_std_lt.eot'); 
src: url('aller_std_lt.eot?#iefix') format('embedded-opentype'), 
url('aller_std_lt.woff2') format('woff2'), 
url('aller_std_lt.woff') format('woff'), 
url('aller_std_lt.ttf') format('truetype'); }

把新的@font-face声明放在样式表的顶部，下面的任何声明都可以用到。font-family不一定要和文件名一致，我们只是为了方便在样式表里面引用。这个字体在字体库里面应该是第一次出现，后面跟着系统中已存在的字体。

body {font-family : 'Aller Light', Helvetica, Arial, sans-serif; }

通常，在系统里安装字体备份是很有必要的，因为我们不能总是依赖浏览器加载字体库，同样我们不能保证在线字体服务总是100%可用的。