Google Fonts 拥有超过 1,250 种免费的开源字体，是网页设计师的绝佳资源。几乎每一种印刷风格都可以在这里找到，并且代表了 135 多种语言。

通常，这些字体是通过 Google Fonts API 实现的。将一些代码片段添加到您的网站，调用 CSS 中的字体，然后收工。容易，对吧？如果您使用可让您随时选择字体的插件或主题，该过程会更加容易。

但也有令人信服的理由在您的网络服务器上本地托管 Google 字体。隐私是其中之一，因为一些司法管辖区已经裁定远程字体托管违反了欧洲 GDPR 法律。

性能是另一个潜在的考虑因素。虽然关于本地托管与 Google Fonts API 存在一些争论，但差异似乎相对较小。利用内容交付网络 (CDN) 的选项也是一种可能。

如果您希望在本地托管 Google 字体，我们将向您介绍一种实现它们的简单方法。说真的——你可以在几分钟内启动并运行！

该过程的第一步是确定您想在项目中使用哪些 Google 字体。浏览官方网站并注意以下几点：

现在，您可以直接从 Google 字体下载您的选择。虽然这种方法没有任何问题，但它可能有点麻烦。

要在您的网站上使用字体，您还必须通过@font-faceCSS 调用本地托管的文件。这包括查看每种字体的 Google 源代码，然后选择正确的字符集并更改src属性以匹配字体的存储位置。

例如，如果我们想使用 Roboto 的“ light ”样式，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 字体不必那么复杂。google-webfonts-helper是一个让这个过程异常顺利的工具。它为您完成所有繁重的工作。

在开始之前，请注意：google-webfonts-helper 和 Google Fonts 本身之间可能存在版本差异。谷歌字体随着时间的推移而改进。不使用 API 意味着并不总是拥有最新版本。

要开始使用，请搜索您要使用的字体。请注意，您一次只能使用一种字体。对于每种其他字体，都需要重复以下步骤。

在我们的例子中，我们会从列表中找到 Google最受欢迎的字体之一 Roboto。

接下来，是时候选择我们需要的字符集（charset）和样式了。

根据我们选择的字符和样式，google-webfonts-helper 生成必要的 CSS。默认情况下，代码旨在支持尽可能多的浏览器。但是，我们也可以选择专注于现代浏览器。

它甚至允许我们编辑要存储字体文件的基本目录。这将立即反映在 CSS 中。

现在应用了我们的所有设置，可以下载 .ZIP 存档。我们会将存档解压缩到选定的目的地，并将其上传到我们的网络服务器。

最后，我们将提供的@font-face代码粘贴到我们的 CSS 中。记下该font-family属性，我们可以将这些字体添加到我们想要的任何 CSS 选择器中。

通过几个简单的步骤（以及来自 google-webfonts-helper 的帮助），您可以放弃 Google Fonts API 并在本地托管字体。它不仅提高了用户隐私，还有助于避免 API 停机或性能瓶颈带来的潜在并发症。

话虽如此，本地托管的字体确实意味着您的 Web 服务器需要做更多的工作。因此，利用缓存和其他优化仍然很重要。在您尝试之前，应考虑这些因素。

无论您如何使用 Google 字体，很高兴知道有多种方法可以使用。这使您可以根据需要选择最佳方法。在本地托管它们可能是正确的方法。

在本地托管Google 字体的简便方法    https://cdnanqi.cn/wangluoyingxiao/17125.html