gatsby omni font loader
v2.0.2
npm install gatsby-omni-font-loader react-helmet
または
yarn add gatsby-omni-font-loader react-helmet
gatsby-config.jsプラグインアレイに次のスニペットを追加します。
{
/* Include plugin */
resolve : "gatsby-omni-font-loader" ,
/* Plugin options */
options : {
/* Font loading mode */
mode : "async" ,
/* Enable font loading listener to handle FOUT */
enableListener : true ,
/* Preconnect URL-s. This example is for Google Fonts */
preconnect : [ "https://fonts.gstatic.com" ] ,
/* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
custom : [
{
/* Exact name of the font as defied in @font-face CSS rule */
name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
/* Path to the font CSS file inside the "static" folder with @font-face definition */
file : "/fonts/fontAwesome/css/all.min.css" ,
} ,
] ,
/* Web fonts. File link should point to font CSS file. */
web : [ {
/* Exact name of the font as defied in @font-face CSS rule */
name : "Staatliches" ,
/* URL to the font CSS file with @font-face definition */
file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
} ,
] ,
} ,
} | オプション | 説明 | デフォルト |
|---|---|---|
| モード | async （デフォルト）またはrender-blockingに設定できます。 asyncモードでは、フォントは最適な方法でロードされますが、FOUTが表示されます。 render-blockingモードでは、まれな場合にはFOUTが発生しますが、フォントファイルはレンダリングブロッキングになります。 | async |
| 範囲 | body （デフォルト）またはhtmlに設定できます。適用するHTMLクラス名のターゲット要素を設定します。 | 体 |
| EnableListener | asyncモードで動作します。フォントロードリスナーに、スタイルのないテキストのフラッシュを処理できるようにします。有効にすると、各フォントが読み込み終了すると、CSSクラスがHTMLに適用されます。 | 間違い |
| 間隔（V1のみ） | enableListenerがtrueである場合は機能します。フォントリスナー間隔（MS）。デフォルトは300msです。推奨：> = 300ms。 | 300 |
| タイムアウト（V1のみ） | enableListenerがtrueである場合は機能します。フォントリスナータイムアウト値（MS）。デフォルトは30秒（30000ms）です。リスナーは、タイムアウト後にロードされたフォントをチェックしなくなり、フォントはまだロードされて表示されますが、ファウトは処理されません。 | 30000 |
| カスタム | 自己ホストフォント構成。フォントファイルとフォントCSSファイルをstaticフォルダーに追加します。 {name: "Font name", file: "https://url-to-font-css.path"}オブジェクトの配列。 | [] |
| ウェブ | Webフォントconfig。ファイルリンクは、フォントCSSファイルを指す必要があります。 {name: "Font name", file: "https://url-to-font-css.path"}オブジェクトの配列。 | [] |
| preconnect | Preconnect Metaに使用されるURL。フォントファイルがホストされているベースURL。 | [] |
| プリロード | プリロードメタに使用される追加のURL。 customとwebフォントのfile属性の下で提供されるURLのプリロードは自動的に生成されます。 | [] |
低優先度モードにフォントスタイルシートとファイルをロードします。パフォーマンスのある方法でフォントを追加する場合は、自分でFoutを処理し、ページのレンダリング時間が低いことを確認する場合は、 asyncモードを使用する必要があります。
長所：パフォーマンス、コンテンツは、フォントファイルがダウンロードされ、解析される前に表示されます
短所： FOUTを処理する必要があります
高優先度モードにフォントスタイルシートとファイルをロードします。このプラグインを、他のプロジェクトで行うようにプロジェクトにフォントを追加する簡単な方法として使用したい場合は、パフォーマンスの最適化やFOUT処理なしで、 render-blockingモードを使用する必要があります。
長所：シンプルなマークアップ、ほとんどの場合、FOUTは発生しません
短所：フォントスタイルシートとフォントファイルは、最初のコンテンツペイント時間を遅らせることができます
フォントを非同期にロードすると、ページがユーザーに表示されてから数時間後にフォントがロードされるため、非スタイルのテキスト（FOUT）のフラッシュが発生する可能性があります。
これを回避するために、CSSを使用してフォールバックフォントをスタイリングして、ロードされているメインフォントのフォントサイズ、ラインの高さ、文字間隔を密接に一致させることができます。
enableListener: trueはgatsby-config.jsのプラグイン構成で設定されている場合、フォントがロードされているときにhtmlクラスが<body>要素に追加されます。
HTMLクラス名形式は、次の形式wf-[font-family-name]になります。すべてのフォントがロードされると、 wf-allが適用されます。
Font Style Matcherを使用して、完璧なフォールバックフォントとフォールバックCSS構成を調整できます。
以下は、すべてのフォントがロードされた後にbody要素がどのように見えるかの例です（構成によって異なります）。
< body
class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body > intervalおよびtimeoutオプションを削除しましたwf-[font-family-name]に変更しました発見した問題を自由に報告し、プルリクエストを作成することでプロジェクトに自由に貢献してください。
貢献は大歓迎で高く評価されています！
貢献していただきありがとうございます！
ヘンリック•レンナート•フランシスシャンパン•ヒューゴ
ご支援ありがとうございます！
Roboto Studio
