谷歌字体安装指南！教你在网页上使用 Google Web font

现时有很多网站流行使用网页字体，这些字体大部分来自 Google Font 提供的700+免费字体，对于网页设计师和前端人员来说，是个很棒的字体库，设计师可以使用字体库提供的免费字体来网页设计，而前端人员可以直接调用 Web Font 样式，极其方便。这篇文章教你怎么用！

本文告诉你：

#1 下载 Google 字体库的免费字体，并安装到电脑上。
#2 在网页上使用 Google Web Font(网页字体）
#3 彩蛋^_^

谷歌字体安装指南！教你在网页上使用 Google Web font

#1 下载&安装 Google 字体库的免费字体

Step 1: 选择字体

进入 Google Font 页面，选择你要的字体（可在左栏或搜索框查找字体），点击「Add to Collection」添加字体，可以多选，添加后，字体会出现在网页下方的 Collection 模块下。

谷歌字体安装指南！教你在网页上使用 Google Web font

Step 2: 下载字体

添加好自己的字体后，接下来就点击右上角的下载按钮来下载字体，如下图：

谷歌字体安装指南！教你在网页上使用 Google Web font

这里我们选择「zip file」压缩包格式进行下载。

谷歌字体安装指南！教你在网页上使用 Google Web font

Step 3：安装字体到电脑

解压刚刚下载的字体包，把字体文件复制到操作系统的字体目录。

Windows字体目录：C:\Windows\Fonts

如果你是 MAC OS 用户，请使用字体册来安装字体，“字体册”位于“应用程序”文件夹中（在 Finder 中选取“前往”>“应用程序”）。

然后把字体直接拖进去安装即可！

谷歌字体安装指南！教你在网页上使用 Google Web font

字体安装完后，用户就可以在 PS, AI, WORD, PDF 等常用软件上使用它们了。

#2 在网站上使用 Google Web Font 字体

Step 1: 选择好字体后，点击「quick use」按钮

谷歌字体安装指南！教你在网页上使用 Google Web font

Step 2: 选择字形

大部分英文字体都有粗体、细体多个字形划分，按需选择即可。

谷歌字体安装指南！教你在网页上使用 Google Web font

Step 3 : 引入字体 CSS 样式表

只需要把给出的一串<link…>代码引进页面<head>里面即可，代码中300,400是设计达人网小编刚刚选择的字粗。

而这个字体名称可以看下方给出的 font-family 代码，如下图：

谷歌字体安装指南！教你在网页上使用 Google Web font

整个过程是十分简单的。

#3彩蛋：Google Font CDN

大陆用户访问 Google web font 比较慢，可以尝试使用提供 Google font CDN 来加速。

【优设酷站22连发！】

免费图库+导航收集站：《酷站两连发！高品质免费图库站+专注WEB/APP导航收集站》
音乐站+字体搜索：《酷站两连发！帮你专心工作的音乐站+谷歌字体在线搜索神器》
渐变色+代码比较：《酷站两连发！渐变色方案全聚合网站+在线代码比较神器》
配色+占位图：《酷站两连发！在线色彩搭配工具+快速生成占位图片器》
LOGO下载+字体下载：《酷站两连发！可商用的矢量LOGO下载+平面最爱的27款免费字体》
压缩图片+在线配色：《酷站两连发！在线图片压缩神器+在线配色工具COLOURCO》
CSS Hover动画+宠物小精灵配色：《酷站两连发！宠物小精灵专属配色网站+CSS HOVER动画收集站》
美女图片+游戏配色：《酷站两连发！游戏配色网站+免费美女素材特供网站》
在线配色+字体推荐：《酷站两连发！在线配色神器+英文字体推荐网站》
追波作品变代码+16进制颜色：《酷站两连发！用代码呈现DRIBBBLE作品+16进制颜色网站》
无缝纹理+多边形背景：《酷站两连发！专注无缝纹理素材站+多边形背景生成器》

原文地址：shejidaren

谷歌字体安装指南！教你在网页上使用 Google Web font

【优设网原创文章投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量112万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com