Google Fonts是一种在网页上使用自定义字体的非常流行的方式。您可以从 Google 库中的数百种开源字体中进行选择，而且它们都是快速且免费的。
问题是，尽管 Google Fonts 可能很方便，但它仍然是第三方依赖项。您网站的每一个新访问者都意味着再次访问 Google 的服务器，获取您希望他们看到的精美字体。Google 表示，他们的 Fonts API“旨在将最终用户数据的收集、存储和使用限制为有效提供字体所需的内容”，1但尽管如此，他们正在跟踪您的访问者，因此您至少需要将 Google 字体包含在您网站的隐私政策中。
有时，去掉第三方跟踪，自己提供字体感觉很好。由于对 WOFF 和 WOFF2 字体格式的广泛支持，这很容易做到。
这是我在最近的一个项目中的做法。
但首先，关于许可
很简单：只有在您获得许可的情况下才将 TTF 转换为 webfont。
在开源许可证（例如SIL OFL或Apache 2.0）下发布的字体都可以免费使用、修改和重新发布。所以他们很高兴去！
另一方面，大多数商业字体许可证明确禁止作为网络字体发布。这很痛苦，但是嘿，那些设计师必须谋生。
这里有几个地方可以找到非常棒的开源字体：
获取 TTF 文件
您需要从字体的 TTF (TrueType) 文件开始。Google Fonts最近在其网站上的字体系列页面中添加了一个“下载系列”按钮，就像这个，用于 Open Sans。单击该按钮将下载一个 zip 存档，其中包含字体的每种粗细和样式的 TTF 文件。
对于您下载的每个 TTF 文件，我们将创建相应的 WOFF 和 WOFF2 文件。这将为您提供相当好的浏览器支持。
然后，最后，我们将在您站点的 CSS 中引用那些 WOFF 和 WOFF2 字体文件。
让我们开始！
构建 WOFF 文件
WOFF 是一种压缩字体格式，2011 年以后发布的大多数网络浏览器都支持，包括 IE9-IE11。2
您可以使用ttf2woff nodejs 脚本将 TTF 文件转换为 WOFF 文件。在这里，我正在下载脚本，并在OpenSans-Regular.ttf我已经下载的文件上运行它：
git clone --recursive https://github.com/fontello/ttf2woff.git
cd ttf2woff
npm install
./ttf2woff.js OpenSans-Regular.{ttf,woff}
ttf2woff.js需要两个参数 –.ttf要转换的源文件和.woff要创建的目标文件。
为了避免两次写出字体的文件名，我使用了 Bash 快捷方式{ttf,woff}。当命令运行时，Bash 会发现大括号，并将两个参数展开（即：myfont.{ttf,woff}变成myfont.ttf myfont.woff）。
构建 WOFF2 文件
WOFF2 是一种更高效的压缩格式，几乎所有现代浏览器都支持，包括 Edge (14+)、Firefox (39+)、Chrome (36+) 和 Safari (12+)。3
Google 在其woff2 库中维护了一个用于创建 WOFF2 文件的命令行脚本：
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
./woff2_compress OpenSans-Regular.ttf
woff2_compress自动创建一个.woff2与输入.ttf文件同名的文件。
编写你的 CSS
现在，您可以在 Web 目录中的某处弹出.woff和.woff2文件，并使用@font-faceCSS 中的规则集引用它们。
这是我以两种样式（常规和斜体）和两种粗细（常规和粗体）提供 Open Sans 的示例：
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-regular.woff') format('woff'), url('/fonts/open-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-italic.woff') format('woff'), url('/fonts/open-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-bold.woff') format('woff'), url('/fonts/open-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-bold-italic.woff') format('woff'), url('/fonts/open-sans-bold-italic.woff2') format('woff2');
}
包含这些local()功能是一种很好的做法，这样，如果用户已经在他们的设备上安装了字体，则使用该本地副本，而不是您的 webfont 版本，从而节省一些宝贵的字节。但是，如果您不知道字体名称和 Postscript 名称，则可以忽略这一点。
- https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users ↩
- https://caniuse.com/#feat=woff ↩
- https://caniuse.com/#feat=woff2 ↩
转自 https://zarino.co.uk/post/self-hosting-google-fonts/
