Google Fonts拥有超过1250种免费的开源字体，是网页设计师的一个惊人的资源。几乎每一种字体风格都可以在这里找到，而且还代表了135种以上的语言。
通常，这些字体是通过Google Fonts API实现的。在你的网站上添加一些代码片段，在你的CSS中调用这些字体，然后就可以了。很简单，对吗？如果你使用的插件或主题可以让你边走边选择字体，那么这个过程会更容易。
但是，也有令人信服的理由在你的网络服务器上本地托管谷歌字体。隐私是其中之一，因为一些司法管辖区已经裁定，远程字体托管违反了欧洲GDPR法律。
性能是另一个潜在的考虑因素。虽然对本地托管与谷歌字体API有一些争论，但差别似乎比较小。利用内容交付网络（CDN）的选项也是一种可能性。
如果你想在本地托管谷歌字体，我们将向你介绍一种简单的方法来实现它们。说真的--你可以在几分钟内启动并运行!
首先，确定你要使用的谷歌字体
这个过程的第一步是确定你想在你的项目中使用哪些谷歌字体。浏览官方网站并注意以下内容。
- 字体名称。
- 你想使用的样式。
- 你需要的语言。
现在，你可以直接从Google Fonts下载你的选择。虽然这种方法没有错，但它可能有点麻烦。
要在你的网站上使用这些字体，你还必须在你的CSS中通过调用本地托管的文件 @font-face在你的CSS中调用本地托管的文件。这涉及到查看谷歌每种字体的源代码，然后选择正确的字符集，并改变src 属性以匹配你的字体存储位置。
例如，如果我们想使用Roboto的 "浅色"风格，CSS看起来是这样的（为清晰起见，添加/编辑了注释）。
/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}
也许这并不是世界上最糟糕的事情。但如果你有几种字体，每种字体都有多种样式，这就会变得非常乏味。
使用Google Webfonts Helper添加字体
在本地托管你的谷歌字体不一定要那么复杂。google-webfonts-helper是一个工具，它使这一过程非常顺利。它为你做所有的繁重工作。
在我们开始之前，请注意：google-webfonts-helper和Google Fonts本身之间可能存在版本差异。谷歌字体是随着时间的推移而改进的。不使用API意味着不总是有最新的版本。
要开始使用，请搜索你想使用的字体。请注意，你一次只能使用一种字体。对于每一种额外的字体，都需要重复下面的步骤。
在我们的例子中，我们将从列表中找到谷歌最受欢迎的字体之一，Roboto。
接下来，是时候选择我们需要的字符集（charset）和样式了。
基于我们的字符和样式选择，google-webfonts-helper会生成必要的CSS。默认情况下，该代码旨在支持尽可能多的浏览器。然而，我们也可以选择将重点放在现代浏览器上。
它甚至允许我们编辑我们想要存储字体文件的基本目录。这将立即反映在CSS中。
随着我们所有设置的应用，一个.ZIP档案可以下载了。我们将解压缩档案到选定的目的地，并将其上传到我们的网络服务器。
最后，我们将提供的@font-face 代码粘贴到我们的CSS中。注意到font-family 属性，我们可以将这些字体添加到我们想要的任何CSS选择器中。
在本地提供谷歌字体
通过几个简单的步骤（以及google-webfonts-helper的帮助），你可以放弃Google Fonts API，在本地托管字体。这不仅改善了用户的隐私，而且还有助于避免API停机或性能瓶颈带来的潜在麻烦。
这就是说，本地托管的字体确实意味着你的网络服务器要做更多的工作。因此，利用缓存和其他优化仍然很重要。这些因素应该在你采取这种做法之前予以考虑。
无论你如何使用谷歌字体，很高兴知道有多种方法可以做到这一点。这使你能够选择最适合你需要的方法。而在本地托管它们可能是正确的方法。
