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 。
