SWELLのフォントをNoto Sans JPを設定する人は注意が必要です。
SWELLのNoto Sans JP設定では、Google FontsのCSSを読み込みます。
リクエスト数と転送量は取得されるフォントや使用文字によって異なるため、自分のページで比較してください。
例えばGTmetrixで計測すると以下の通り、27リクエスト数も発生して、しかもブロッキング（ベージュ色）も起こしています。
検証からソースを見てみると以下のように読み込まれているのが確認できます。
この記事では、配布済みのサブセットを子テーマから読み込む手順を紹介します。
導入前後で使用文字、転送量、表示時間を比較し、必要な文字が欠けていないことも確認します。
その備忘録です。
以下の27→3は2024年の掲載画像に残した測定例です。同じ結果や高速化を保証する値ではありません。現在の環境では転送量、表示時間、使用文字の欠落を合わせて比較してください。
SWELLでNoto Sans JPのリクエスト数を下げて高速化する方法│サブセット
やり方は簡単です、子テーマにフォントを格納してCSSでフォントを指定するだけです。
サブセット化されたNoto Sans CJK JPをダウンロード
下記からサブセット化されたNoto Sans CJK JPをダウンロードします。
緑のCodeボタンからDownload ZIPを押して、フォントをダウンロードして解凍しましょう。
https://github.com/minoryorg/Noto-Sans-CJK-JP
ダウンロードしたフォントを子テーマに格納する
FTPまたはファイルマネージャーのプラグインを用いて、SWELLの子テーマにフォントを格納しましょう。
今回はファイルマネージャーからインポートします。
プラグインを有効にしたら管理画面の WP File Manegerのメニューを開きます。
子テーマの直下に、小文字でfontsというフォルダを作成します。下のCSSは、このfontsと同じ階層にある子テーマのstyle.cssへ追記する前提です。
ここに使いたいフォントをドラッグ＆ドロップします。
今回は下記の2種類を選びました（通常の文字と太文字のみ）
- NotoSansCJKjp-Regular.woff2
- NotoSansCJKjp-Bold.woff2
SWELLのNoto Sans JPの読み込みをやめる
カスタマイズ ＞ サイト全体設定 ＞ 基本デザインからベースのフォントを游ゴシックに変えておきます。
フォントの読み込み
サブセット化されたフォントをCSSを使って読み込み＆設定しましょう。
子テーマのstyle.cssへ次のCSSを追加します。url()はCSSファイルからの相対パスなので、追加CSS欄にはそのまま貼らないでください。追加CSS欄を使う場合は、実際に配置したフォントの完全URLへ置き換えます。WordPressがサブディレクトリにある場合も、/wp-content/から始まる決め打ちのURLは使いません。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('fonts/NotoSansCJKjp-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('fonts/NotoSansCJKjp-Bold.woff2') format('woff2');
}
body {
font-family: "Noto Sans JP", sans-serif;
}確認
最後にフォントが表示されているか確認しましょう。
見た目だけで成功と判断せず、開発者ツールのNetworkでwoff2が200になり、実際の使用フォントが切り替わったことを確認します。人名・地名・旧字体など、サブセットに含まれない文字の代替表示も調べてください。
以下は旧環境の測定結果です。今回の更新では現在のサイトの速度改善は測定していません。
SWELLの設定とGoogle Fontsの出力を照合する
| ベースのフォント設定 | SWELL 2.19.0のhead出力 |
|---|---|
| Noto Sans JP | Noto Sans JPのGoogle Fonts CSSを出力 |
| 游ゴシック | このGoogle Fonts CSSを出力しない |
| 明朝体（Noto Serif JP） | Noto Serif JPのGoogle Fonts CSSを出力 |
実際のSWELLのhead出力処理で、上の3設定を比較しました。
自己配信へ切り替えたつもりでもGoogle Fontsの通信が残る場合は、ベースのフォント設定と公開ページのlink要素を先に照合します。
テーマ設定の管理画面保存を今回試した結果ではありません。
掲載CSSのfonts/という相対URLは、子テーマのstyle.cssを基準に解決されます。
追加CSSへ貼る場合は、設置した2ファイルの完全URLに変更してください。
URLの基準についてはCSS url()の仕様も参照できます。
Google FontsのCSSが出なくなっても、自己配信フォントの表示成功や高速化は別に確認します。
Networkで通常・太字の2ファイルの取得を確認し、実際の使用フォントと必要な字形を調べてから、同じ条件で表示時間を比較してください。
まとめ
サイトの高速化で画像やコードを最適化するのも大事ですが、意外とWebから参照しているフォントも重いです。
サブセット化は収録する文字を減らす方法です。必要な文字が欠けると別のフォントで表示されます。提供元READMEにある収録範囲を確認し、ライセンスと配布条件も保持してください。元へ戻すには追加したCSSを削除し、変更前のSWELLフォント設定に戻します。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
font-displayの仕様に従い、例ではswapを指定しています。読み込み中は代替フォントを表示するため、切り替え時のレイアウト変化も確認してください。
