next google fontsダウンロード - next google fontsソースコードダウンロード

next google fonts

AI ソースコード

v2.2.0

ダウンロード

ショ和

このプロジェクトは非推奨されています

next.js 10.2の時点で、Googleフォントは自動的に最適化されていますか？

このプロジェクトへのあなたのすべての愛とサポートに感謝します、
ジョー

Next-Google-Fonts

Googleフォントを高速かつ非同期的にロードするための小さなnext/headヘルパー

next.js 10を使用しますか？「これはnext.jsフォントの最適化と比較してどうですか？」を参照してください。続行する前に。

設定

この例では、next.jsアプリにInter （特に重み400および700 ）を追加します。

実用的な例については、joebell.co.ukを参照してください。

next.jsプロジェクトにパッケージを追加します：
```
npm i next-google-fonts
```

カスタムHeadコンポーネントを作成します。

next-google-fonts小さなnext/headコンポーネントであり、 next/head内にネストされるべきではないことを認めることが重要です。これを解決するには、両方のコンポーネントをFragmentで包みます。

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

賢明なフォールバックで、要求されたGoogleフォントをスタイルに追加します。 CSSを使用しているのか、SASSまたはCSS-in-JSを使用しているのかは関係ありません。
```
 body {
  font-family : "Inter" , sans-serif;
}
```
次の.jsアプリを実行して、結果を確認してください！
最初にフォールバックフォントが表示されることを期待する必要があります。その後、レンダリングブロッキングCSS警告なしにGoogleフォントへの切り替えが続きます。フォント/sは、アプリが再水和するまで表示され続けます。
JSが無効になっている場合、フォールバックフォントのみが表示されます。

FAQ

これはnext.jsフォントの最適化と比較してどうですか？
なぜ？

これはnext.jsフォントの最適化と比較してどうですか？

next.js 10自動Googleフォント最適化を導入すると、次の基準に基づいて使用するソリューションを決定できます。

「私のフォントは優先されず、非同期にロードできます」 - next-google-fonts使用してください。
「私のフォントは優先的であり、非同期にロードされるべきではありません」 - Next.jsフォント最適化を使用します。

詳細については、次の.JS問題ディスカッションを参照してください。

なぜ？

next-google-fonts next.jsでGoogleフォントを使用するプロセスをより一貫性があり、より速く、痛みのないものにすることを目的としています。これは、Font Asset、Preloads、および非同期にCSSファイルを前提としています。

next/headの現在のイテレーションでは、非同期Googleフォントロードの馴染みのある「メディアハック」方法を利用することはできません。

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>