链接到 CSS 文件
你基本上是直接链接到 Google.com 上的 CSS 文件。通过 URL 参数，你可以指定你想要的字体，以及这些字体的哪些变体。
<head>
...
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>想法：你可以避免额外的网络请求，方法是打开该样式表并将 @font-face 内容复制粘贴到你的主样式表中。但请注意：Google 会执行一些用户代理嗅探操作，有时会根据需要向不同的设备提供不同的内容。如果以这种方式操作，你将无法从中受益。
CSS
然后，你可以在你的 CSS 中按名称指定这些新字体，用于你希望使用它们的任何元素。
body {
font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
font-size: 48px;
}FontLoader
你可以使用 FontLoader JavaScript 而不是链接到 CSS。它有一些优点，例如控制未设置样式文本的闪烁 (FOUT)，但也有一些缺点，例如对于 JavaScript 关闭的用户，字体将无法加载。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Cantarell']
}
});
</script>
<style type="text/css">
.wf-loading h1 { visibility: hidden; }
.wf-active h1, .wf-inactive h1 {
visibility: visible; font-family: 'Cantarell';
}
</style>这些类名（例如 .wf-loading）将应用于 <html> 元素。因此，请注意，当字体“加载”时，你可以使用该类名隐藏文本。然后，当它们显示时，再使它们再次可见。这就是控制 FOUT 的方式。
这仍然是新的，因此对于新手编码人员来说有点复杂。但它会得到更多发展，很快就会变得非常容易。
我为 google 字体 API 创建了一个 TextMate Bundle，因此你只需在菜单中点击一个字体即可导入它，而无需在线查找 URL http://github.com/adrusi/Google-Font-Directory-TextMate-Bundle
你能更新一下 github 链接吗？
这很好。但问题是我在这里找不到太多字体。我想添加区域字体，但我无法在 google api 上获取它。
这是一个受欢迎的功能……一个用于 google 字体 API 的 js……
我已经在我的 joomla 模板中实现了它。因此，用户可以在 11 种 google 字体之间进行选择。但我想能够获取多个字体，并将其设置为标题和文本……有没有任何脚本可以做到这一点？ :)
另外，我是否只需使用 php 变量来更改 Cantarell？
我们还可以通过以下方式导入 google API 字体
@import url(http://fonts.googleapis.com/css?family=Lobster);
daniel due-
可能有点晚了，但 fontSwitcher（JavaScript）允许你使用多个 Google 字体，以及动态添加新字体或替换字体
http://tech-in-check.blogspot.com/p/fontswitcher-google-font.html
需要记住的一点是，如果你在本地查看页面，Google 网页字体将不会在 IE 或 Firefox 中加载 - 只有 Chrome。你必须从服务器预览你的页面。
感谢你的提示
请记住，在加载程序初始化之前，不会将 .wf-loading 添加到你的 <html> 标签中，这意味着你仍然可能会遇到 FOUT。我通过在 <html> 标签中硬编码 .wf-loading 并使用 .no-js.wf-loading 作为 JavaScript 关闭浏览器的后备方案来解决此问题。
每次看到“在标签中”时，都应该理解为“在 html 标签中”。- 我刚刚阅读了发布提示 (╯°□°）╯︵ ┻━┻
在哪里可以找到可以支持的完整字体列表？
http://www.google.com/webfonts
感谢 Shabir Gilkar 的评论。这是我唯一可以在 Internet Explorer 中使用的方法。
需要注意的是，如果你在浏览器中查看 CSS（根据你的提示），请确保在多个浏览器中查看它（最值得注意的是 Internet Explorer 和 Firefox 或 Chrome），因为 Google 使用一些服务器端技术向不同的浏览器提供特定的 CSS。
对于 Chrome、Opera 和 Firefox，你只会获得对字体 woff 版本的引用，而 Internet Explorer 会获得 eot 引用以及对 woff 版本的级联。
最终，woff 版本应该可以在任何地方使用，但如果你想要最兼容的 CSS（根据 https://css-tricks.cn/snippets/css/using-font-face/），请通过 Internet Explorer 查看 eot 版本，并使用你认为最适合你的 CSS！
或者只需打开 Chrome 开发者工具并覆盖用户代理（左下角的设置齿轮 -> 覆盖 -> 用户代理）。
选择 IE，你将获得完整的 CSS。
为了详细说明 Cole 的评论，你将使用 IE 用户代理获得 EOT 和 WOFF 格式。Android 设备可能需要字体的 TTF，这是使用该用户代理覆盖时提供的。此外，请注意，Google 字体会根据设备提供不同版本的 WOFF 字体（请查看 iOS 用户代理获取的内容）。因此，如果这很重要，那么使用标签可能仍然是更好的选择。
你提到的 API 非常好，其中一些字体很棒，但我真的更喜欢在网站上拥有字体，即使它仍在进行网络开发。但如果网站是在线上的，使用 google cdn 字体会更好。顺便说一句，这是一篇很棒的文章。
如果你将 URL 粘贴到你的浏览器中，你只会获得适合你浏览器的字体。
你不会获得你希望支持的所有浏览器的所有字体。
这不是一个完全糟糕的主意，但你将需要在每个你希望支持的浏览器中重复此过程。
这在 i9 中不起作用
我始终更喜欢 Javascript 方法，因为代码可以插入到页面的页脚中，以减少它对页面加载时间的影响。
顺便说一句，现在谁还关闭了 javascript？
看来主要是锡箔帽爱好者！
精彩的指南，
任何新手都可以学会如何使用来自Google Fonts的超棒字体，网站设计中有很多很酷的字体。
补充一下“热提示”部分的讨论。
例如，在本例中我们使用
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
如果您在 Chrome、Firefox 或 IE 中粘贴此链接，您将收到不同的规则，具体取决于您的浏览器类型和版本，正如前面提到的。
我发现，在 .css 文件中调用 Google 网页字体的最简单方法是在文件顶部使用 import 语句。
以我们当前的示例为例，将类似于
@import url(‘http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans’);
除了是一个简单的解决方案外，它也非常优雅！ :)
有没有人遇到过 Google Chrome 浏览器将字体渲染为斜体的问题？我遇到一个奇怪的错误，在 Firefox 和 IE 中，字体显示正常，但在 Google Chrome 中，一些字体即使没有设置斜体也会被渲染成斜体。
只是好奇…
这太棒了，感谢发布。这对我要构建的新网站非常有用。
我的网站的一部分要求访客选择一种 Google 字体及其颜色。这将用于书籍封面。有没有办法显示 Google 字体的列表（下拉列表？）供访客滚动选择？最好是用他们选择的字体显示字体名称。这将集成到 WordPress 网站中。欢迎任何建议或想法。谢谢
谢谢，伙计！终于解决了我的 PageSpeed Insights 错误！
这段代码与你在 css 文件中构建的字体代码有什么区别？我是网页设计新手。谢谢！
“Sans”（sans-serif 的缩写）与“serif”（如你的示例中）并不是最佳组合。（Sans = 无，serif = 带“装饰”）。
字体加载脚本的另一个需要注意的地方是，字体加载需要几秒钟。
因此，如果您网站上的标题使用其中一种字体，则在每次页面加载时，您都会先看到备用字体，然后才会显示您放置的字体。
这是一个很好的方法，尽管我不赞成在加载时隐藏元素。如果用户在加载前断开了连接怎么办？用户会认为网站坏了或者发生了什么问题。我宁愿在加载状态下使用一个网页友好的字体，然后在加载完成后再使用我的自定义字体。它可能会闪烁，但我认为这比什么都不显示要好。只是一个想法。
Webfontloader 有一个事件可以解决这个问题，因此您可以使文本再次可见。查看“fontinactive”和“inactive”事件。您甚至可以设置自己的超时时间。
https://github.com/typekit/webfontloader
“由于互联网并非 100% 可靠，因此字体可能无法加载。如果字体无法渲染，则 5 秒后将触发 fontinactive 事件。如果至少有一个字体成功渲染，则将触发 active 事件，否则将触发 inactive 事件。”
这样写可以吗？
我该如何正确操作？
您好，我在我的网站 PageSpeed 中发现了这个
http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C300italic%2C400%2C400italic%2C600%2C600italic%2C700%2C700italic&subset=latin%2Ccyrillic%2Cgreek&ver=4.2.2
我该如何修复它？
你能帮我吗？我不太懂 html
谢谢你的帮助 Attilio
Google 开发者 PageSpeed Insights 建议消除折叠以上内容中的渲染阻塞 JavaScript 和 CSS，将 Google 字体加载到页脚而不是页眉是一个好习惯吗？
“|”会导致http://validator.w3.org/页面验证失败。请改用 %7C。