nextjs tailwind googlefonts selfhost starter
1.0.0
タイポグラフィはあなたのアプリケーションをzingにすることができます!!!
Googleフォントを追加すると、アプリでカスタムフォントを使用できます。それらは無料として宣伝されており、900以上のフォントファミリから選択できます。 2018年以来、Googleはフォントを追加する方法として自己ホーストを推奨しています。
無料でさまざまなプラットフォームに組み込まれたWebセーフフォントの数があります。ただし、設計目的を果たすために、よりカスタマイズされたものが必要な場合があります。
だから「それ以上のことなく」...
このrepo 、CDNへのリンクを使用するのではなく、Googleフォントの自己ホスティングを具体的にターゲットにしています。
多くの記事やブログで議論されている自己ホーストの長所と短所がありますが、ここではこれらについて詳しく説明していません。さらに読むために、このreadmeファイルの最後にいくつかのリンクを提供しました。
Googleフォントはオープンソースとして宣伝されており、無料で使用できます...
しかし、それについて私の言葉を受け取らないでください（私は素人ではなく、これは法的助言ではありません）
この例で使用されているすべてのフォントは、SILオープンフォントライセンス（OFL）v1.1の下のGoogleフォントから供給されます。 OFLで要求されているリポジトリ内の自己ホスティングフォルダーにライセンスを組み込むように注意しました。
注：フォローに従う責任があるため、フォントライセンス情報を常に自分で読む必要があります。この時点で、Googleフォントの使用ofl v1.1では、Apache 2ライセンスを使用するものもあります。 ubuntuフォントは、ubuntuフォントライセンスv1.0を使用します
自己ホストまたはカスタムフォントを使用する前に、法的アドバイスを求める必要があります。
ここでデモのコードを参照してください
以下のツールを使用して、さまざまな方法でGoogleフォントを取得できます（これはエクサイ測量リストではありません）。
フォントは、グーグルのGitHubリポジトリにもあります。
それらをダウンロードすると、プロジェクトに自己ホストに追加できます。
それらをホストする最も簡単な方法は、 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アプリにserverdになります。
フォントファイル、ライセンス、スタイルシートなどをダウンロードし、フォルダーを構造化したら、フォントの読み込みを実行する必要があります。
@font-faceを使用してフォントをロードできます。上記のfontフォルダーのフォントリソースと一緒に配置されたCSSファイルを参照してください。
最終的にこれらをTailwind Styles CSSファイルにインポートできます。通常、これはglobal.cssと呼ばれます。私は次の3つのファイルを使用しています。
例えば：
@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を防ぐことができます。
これを実装するために利用可能な多くの戦略があります。
| 戦略 | 説明 |
|---|---|
1。 block | フォントがロードされるまで、ユーザーに何もレンダリングしないでください。 |
2。 swap | Googleフォントに推奨されます。フォントがロードされると交換されます。 |
3。 fallback | お勧めしません。それはまだブロックのような目に見えないテキストを短時間表示しますが、最終的には安全なフォントにフォールバックされます。 |
4. optional | フォントが重要ではない場合は、ブランドとコンテンツに焦点を合わせます。フォントをロードしない可能性のある遅い接続フォールバックのようなものです。 |
これは、リストしたフォールバックシステムセーフフォント（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' ;これは、以下のTailwindスタイルファイルにインポートされます。
次に./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ファイルを設定して、フォントファミールをアプリに追加します。ベースフォントテーマに追加するか、テーマ（またはその両方）を拡張します。
例えば：
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'],
},
},
},
;
それでおしまい。完了です。詳細については、コードをご覧ください。
読んでくれてありがとう。 ？ ？
これが便利だと思ったら、私に主演してください。
以下に、それが有用であると思われる人々の詳細情報を続けます。 ？
灯台を使用してページのパフォーマンスをテストできることを忘れないでください。これは、フォントとスクリプトの最適化を探し、FOUTやFOITの問題を含む推奨事項を含めることもできます。
一度構築されたら、このデモがローカルで実行されているときに以下を取得すると言ってうれしく思います。
私が自己ホストを選択する主な理由は、次のとおりです。
| 1。Googleはそれをお勧めします | Google自身が推奨しています。 2018年以来、Googleはプリロードを通じて最適なパフォーマンスのために、自己ホスティングを推奨しています。自己ホスティングは無料で、奨励されています。このビデオを参照してください：Google Chrome Developers：Webパフォーマンスは簡単です。 |
| 2。プライバシーの方が良い | サードパーティのCDNは、必要に応じてクッキーや追跡アルゴリズムを使用できます。これは、ユーザーの同意が必要な国では問題になる可能性があります（つまり、データプライバシーとGDPR、GDPRコンプライアンスのGoogleフォントを参照してください。 |
| 3。セキュリティの方が良い | あなた自身のサーバーでより多くの制御）。 CDNを使用するときに、実際に少なくとも2つのドメインを呼び出します。 |
| 4.より速く、より多くのpeformant | Googleフォントは、必要のないリソースを追加します。フォントスタイルなどを選択し、独自のフォント関連のCSSルール/ファイルをバンドルしてマイニングして、HTTPリクエストを少なくすることができます。これを行うには、サイトのタイポグラフィに必要な特定のフォントとユニコードを所有して提供できます。家族全員ではなく、フォント家族の一部を指定します。フォントスタイルなどを選択し、独自のフォント関連のCSSルール/ファイルをバンドルしてマイニングして、HTTPリクエストを少なくすることができます。 |
| 5。オフラインの可用性 | オフラインでアクセスされるモバイルおよびデスクトップアプリ用。 |
これを自分で試してみてください。
特定のサイト/アプリでテストし、「キャッシュの無効」と接続速度を変更するビルトイン機能と組み合わせた開発ツールを使用することをお勧めします。
フォントを追加するためにnpm packagesの使用をカバーしていません。これがあなたの好みである場合、オンラインで利用できるフレーバーがたくさんあります。
いくつかの選択肢は、 fontsourceまたはNext-google-fontsを使用してみることです。
