nextjs tailwind googlefonts selfhost starter
1.0.0
排版可以使您的应用程序zing ！！！
添加Google字体可让您在应用中使用自定义字体。它们被广告免费，有900多个字体家庭可供选择。自2018年以来，Google建议自我托管作为添加字体的一种方式。
有许多Web安全字体，它们是免费的，并且内置在各种平台中。但是，有时我们需要更自定义的东西来实现我们的设计目的。
因此，“没有更多的事情” ...
该repo专门针对Google字体的自我托管，而不是使用指向其CDN的链接，以及如何将它们集成到使用Tailwind CSS的Next.js应用中。
有许多用于自我托管的利弊，在许多文章和博客中已经讨论过，我不会在这里详细介绍这些内容。我在此读书文件的末尾提供了一些链接，以供进一步阅读。
Google字体被宣传为开源，免费使用...
但是不要相信我的话（我不是外行，这不是法律建议）
此示例中使用的所有字体均来自SIL开放字体许可（OFL）v1.1的Google字体。我已经注意将许可证纳入回购中的自托管文件夹中，该文件夹在OFL中要求。
注意：您应该始终自己阅读字体许可信息，因为您有责任遵循它。此时，Google字体使用v1.1，有些使用Apache 2许可证。 Ubuntu字体使用Ubuntu字体许可证v1.0
您应该在自托管或使用任何自定义字体之前寻求法律建议。
在此处查看代码演示
您可以使用以下工具以多种方式掌握Google字体（这不是令人振奋的列表）：
字体也可以在Google github repo上找到。
有一次，您已经下载了它们，可以将它们添加到您的项目中。
托管它们的最简单方法是在一个名为fonts的子文件夹中的public文件夹下。
我已经构建了字体资源位置，如下所示，您不必遵循此内容，它表明了灵活性，并且所有字体都可以组织起来，而不仅仅是将其放置在
fonts子文件夹下。
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
字体将从此位置到我们的next.js应用程序。
一旦下载了字体文件，许可证，样式表格等并构建了文件夹，我们就需要执行字体加载。
我们可以使用@font-face加载字体。请参阅上面font文件夹中的字体资源并旁放置的CSS文件。
我们最终可以将这些导入到尾风样式中CSS文件。通常，这称为global.css ，我正在使用3个文件，这些文件已导入到下一个文件。JS_APP.JS文件。
例如：
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
}接下来，我们使用font-display属性对字体加载进行一些小的优化。
通过将@font-face与font-display属性结合使用，我们可以防止Fout和FOIT。
有许多策略可实施以下操作：
| 战略 | 描述 |
|---|---|
block | 在加载字体之前，不要向用户渲染任何内容。 |
2。 swap | 推荐用于Google字体。字体加载后，它将交换。 |
3。 fallback | 不建议。它仍然显示出短时间的隐形文本，例如块，但最终会退回到安全的字体上。 |
4。 optional | 当字体不重要时，一个不错的选择，更多地关注品牌和内容。就像慢速连接的后备，甚至可能不会加载字体。 |
这是一个新规则，您可以添加到字体面声明中，该声明告诉浏览器使用您已列出的后备系统Safe-Font（例如SANS Serif），然后在下载时将其交换至所需的字体。
它可以提高性能，因为它可以显示内容而不等待下载完成。
font-display: swap;如果字体尚未加载，则确实有闪烁此未风格文本的缺点。但是我们可以用预紧力来解决这个问题。
我们可以在页面应用程序的<head> >中预加载字体。这对于我们想要在不闪烁而要显示的那些关键排版方面特别有用。
todo，我们可以将<preload>添加到我们页面的头部。
在Next.js中，我们将其添加到自定义_document.js中：如下：
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head >注意：使用预紧力时要小心，因为它可能会产生负面影响（如果过度使用）。因此，我们明智地使用它。它是设定资源重要性的一种方式，如果需要，我们也可以为script资源做同样的事情。
接下来，我们在publicfonts文件夹下创建一个Fonts.css文件。这是我们在这里使用@font-face上面加载的Google字体资源的各种CCS文件，即
@import './google/oswald/Oswald-Variable.css' ;然后将其导入到下面的尾风样式文件中。
接下来，我们将以下内容添加到./styles文件夹下的app-base.css文件中。
我们使用@layer指令来告诉tailwind我们也添加了哪个“桶”。
有效的层指令是基本，组件和实用程序。
例如：
@layer base {
@import "../public/fonts/fonts.css";
}
然后，我们将样式导入_app.js文件：
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
最后，我们设置了tailwind.config.js文件，以将FONT Familes添加到我们的应用中。我们要么将它们添加到基本字体主题中，要么扩展主题（或两者）。
例如：
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
就是这样。我们已经完成了，请参阅代码以获取更多详细信息。
感谢您的阅读。 ？ ？
如果您觉得这有用，请给我带来明星。
以下内容是，更多信息可能会发现它有用的信息。 ？
请记住，您可以使用Lighthouse测试页面性能，这还将查找字体和脚本的最佳功能，并包括建议，包括Fout和FOIT问题。
一旦建造，我很高兴地说，在本地运行时，此演示会得到以下内容。
我选择自我主机的主要原因如下：
| 1。Google推荐它 | 现在，它由Google自己推荐。自2018年以来，Google推荐自托管，以通过预加载来最佳。自我托管是免费的，并且受到鼓励，请参见此视频：Google Chrome Developers：Web Perfection变得很容易。 |
| 2.更好的隐私 | 第三方CDN可以使用cookie和跟踪您不可能知道的算法。在您需要用户同意的国家 /地区（即数据隐私和GDPR，请参见：Google字体符合GDPR符合性的国家 /地区），这可能是一个问题。 |
| 3。更适合安全 | 更多控制您自己的服务器）。使用CDN时，您实际上至少调用2个域。 |
| 4。更快，更具形象 | Google字体添加您可能不需要的资源。您可以选择字体样式等，然后捆绑，并缩小您自己的字体相关的CSS规则/文件，提供更少的HTTP请求。您可以通过为网站排版所需的特定字体和UNICODES独自服务来做到这一点。特定的Font Familes而不是整个家庭的部分。您可以选择字体样式等，然后捆绑，并缩小您自己的字体相关的CSS规则/文件，提供更少的HTTP请求。 |
| 5。离线可用性 | 用于离线访问的移动和桌面应用程序。 |
自己尝试一下。
我鼓励您使用特定的网站/应用程序测试，并使用DEV工具与“禁用缓存”和更改连接速度的内置能力。
我尚未介绍使用npm packages来添加字体。如果您的喜好，在线有许多口味。
一些替代方法是尝试使用Fontsource或Next-Google-Fonts 。
