フォントをロードする 正しく

OMGFは本当に使いやすいです。ビデオを見ると、このプロセスには長くても 1 ～ 2 分かかることがわかります。このプラグインは Google Fonts のみに対応しており、他の Typekit や Adobe フォントには対応していないことに注意してください。ただし、ほとんどの商用テーマは Google Fonts を使用しているため、必要なプラグインはこれだけです。

だから何 やりますか?

プラグインをインストールしたら、[設定] / [Google Fontsの最適化]に移動します。次に、文字通り「自動検出」をクリックすると、Web サイトで使用されている Google フォントのリストが表示されます。標準設定を維持したい場合は、「保存」をクリックするだけで完了です。フォントがダウンロードされ、Google Fonts を使用するための新しい CSS ファイルが作成されます。

使用している場合 アセット クリーンアップ プロ、そこに移動し、[設定] / [Google Fonts]に移動します。詳細タブをクリックし、スイッチをクリックして「すべて削除」を有効にします。これにより、フォント使用時の Google への外部呼び出しがすべて停止されます。

まれに、これによってフォントが壊れる場合があります。これは、テーマのヘッダーで特定のフォントが使用されており、上書きできない場合です。この場合、テーマ テンプレート ヘッダー ファイルの編集が必要になる場合がありますが、それはそれほど一般的ではありません。

どうですか プリロード?

プリロードは、スクロールせずに見える範囲で使用される優先フォントをロードするためのものです。これは通常、メニューのフォントと段落テキストです。スライダーやページ上部のヒーロー グラフィックスで使用する場合を除き、イタリック フォントや特殊フォントをプリロードする必要があることはほとんどありません。優先するフォントについては、保存する前にプリロードにチェックを入れてください。

優先フォントがわからない場合は、すべてにチェックを入れてください。次に、キャッシュをクリアして、Google Chrome でページを再読み込みします。右クリックして「検査」をクリックします。新しい警告 (感嘆符の付いた黄色のボックス) が表示された場合は、それをクリックします。必要のないフォントをプリロードしているという警告に注意してください。フォントとフォントの太さをメモします。次に、プラグイン設定に戻り、そのフォントのプリロードのチェックを外します。これで完了です。

フォントをプリロードすると、「FOUT」の問題も解決できる可能性があります。一番のヒントは、設定があるときは常に「font-display: swap」を使用することです (これは Asset Cleanup Pro のオプションです)。そうすれば、Web サイトがシステム フォントから様式化されたフォントに切り替わるときのテキストのフラッシュが目立たなくなり、Google Lighthouse でのスコアが大幅に向上します。

OMGF はほぼすべての WordPress Web サイトと互換性がありますが、一部のインストールでは問題が発生する可能性があります。最初にフォントを分析したときにフォントがリストに表示されない場合は、別のタブで Web サイトを開いてください。次に、プラグインに戻り、もう一度「分析」をクリックします。今度は、フォントのリストが表示されるはずです。