谷歌字体是谷歌免费提供的一项服务，允许访问数千种字体。所有可用的字体都是开放源码许可的，这意味着它们可以免费用于商业和非商业项目。
入门
这篇文章将在一个网页上使用谷歌字体。下面是一个样板网页现在的样子：
的屏幕快照
下面是样板的HTML标记：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>My web page</title>
8</head>
9<body>
10 <h1>Welcome to my website</h1>
11</body>
12</html>
很无聊，是吧？让我们用更好的字体让它变得更有趣一些。
选择字体
现在是我们选择字体的时候了。前往fonts.google.com，按下小（+ )（加号)按钮，选择您喜欢的字体。我将使用Karla。一旦你选择了你的字体，展开页面底部的抽屉。
有两种方法可以导入字体以供使用。对于第一种方法，复制Standard标签下代码框中的代码。现在返回到您的标记，并将复制的代码和样式标记添加到文档的头部，如下所示。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>My web page</title>
8
9 <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
10</head>
11<body>
12 <h1>Welcome to my website</h1>
13</body>
14</html>
<$>[注意]您将从上面的URL示例中注意到，Google FontsNow supportsthe[Font-Display property](/css/font-face/# controlling-font-loading-enter-font-display)！🎉<$>
如果您已经有了一个单独的CSS样式表，请复制@port标签下的代码，并将其添加到样式表的顶部，如下所示。
1@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');
2
3.element {
4 /* ... */
5}
使用字体
我们已经导入了字体，现在是使用它们的时候了。让我们将我们的HTML标记的body设置为使用Karla，如下所示：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>My web page</title>
8
9 <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
10
11 <style>
12 body {
13 font-family: 'Karla', sans-serif;
14 }
15 </style>
16</head>
17<body>
18 <h1>Welcome to my website</h1>
19</body>
20</html>
现在，如果我们看看我们的网页，它看起来是这样的：
的屏幕截图
看起来好多了！
✨这很容易，不是吗？现在你可以用谷歌字体提供的免费字体托管让你的网页看起来更漂亮了！感谢您的阅读！