お問い合わせ

2024年最新 | Webフォントの読み込みのベストプラクティスは?

WebフォントのGoogleフォントが無料で公開されてから、WebサイトのフォントにWebフォントを使うのが当たり前になってきています。

しかし、日本語はフォントのファイルサイズが大きいのでWebフォントを使う時に注意することがあります。

Webフォントを使う時に注意
  • フォントの読み込みが遅くてサイトが表示されにくい
  • 文字の表示がちらつく
  • Page Speed Insightで警告が出る

この記事では上記の問題を回避できる2023年の最新のwebフォント読み込み方法をお伝えします。

2024年のWebフォント読み込みベストプラクティス

Googleフォントからコピペできるlinkタグは以下のような3行のソースになっていると思います。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">

それを以下のような形式に書き換えます。

add_action('wp_head',function(){?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="preload" as="style" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"  media="print" onload="this.media='all'">

<?php });

SWELLなどの有料テーマでWebフォントを使用している場合の適用方法

テーマで使用するフォントをWebフォントに指定している場合は、組み込みフォントに切り替えます。

そうしないとWebフォントが2重に読み込まれてしまう場合があります。

その後、上記のコードをfunctions.phpに書けばWebフォントの読み込みは大丈夫です。

CSSで使用するWebフォントを指定する必要がありますので、以下のように追加CSSなり、子テーマのstyle.cssに追加します。

body{
font-family: 'Noto Sans JP', sans-serif;
}

フォント読み込み時のちらつき(FOIT)を軽減するには?

webフォントを読み込むのはファイルが大きいのでダウンロード時間がかかります。

その間、別のフォントで表示しているとフォントを切り替える動作が見えてしまいます。

SWELLの場合は、ページ切り替えアニメーションを有効化していれば、フォント切り替え時のチラつきが見えなくなります。

ページ表示時のアニメーションを有効にするには?

SWELL設定⇒機能停止⇒「ページ表示時のアニメーション」を停止するのチェックを外します。

初期状態でチェックされているので、webフォントを使用する場合は、自分でチェックを外しましょう。

Webフォントをローカルにダウンロードする

Snow MonkeyはWebフォントをテーマ内にダウンロードしてくれます。

自分でGoogleフォントからフォント一式をダウンロードしてサーバーにアップロードすれば、Webフォントを自前のサーバーから読み込むことができます。

Googleフォントをダウンロード

Googleフォントのサイトから使用するWebフォントをダウンロードします。

zip型式で固まったファイルでダウンロードできます。

日本語フォントはサイズが大きいので、サブセット化されたものを使用するのが一般的です。

サブセット化されたフォントはこちらから

サブセットの種類

ダウンロードしたサブセットのフォントは、subsetとsubset-minの2種類用意されています。

  • subset: カーニングなどのフォント情報を保持したサブセットフォント (.woff2, .woff, .otf)
  • subset-min: すべてのフォント情報を削除した最小サイズのサブセットフォント (.woff2, .woff, .otf)
  • fontfeaturesettings: “palt“を使いたい場合は、subsetを選びましょう。
  • 必要無ければ、subset-minを選びます。

Google fontsをそのまま置き換えたいのであれば、subset-minで大丈夫です。

スクロールできます
オリジナルGoogle 版サブセットsubset (OTF / WOFF / WOFF 2.0)subset-min (OTF / WOFF / WOFF 2.0)
Thin15.2 MB4.2 MB2.1 MB / 1.6 MB / 1.4 MB780 KB / 565 KB / 491 KB
Light16.2 MB4.4 MB2.2 MB / 1.8 MB / 1.5 MB776 KB / 591 KB / 517 KB
Demi Light16.4 MB4.5 MB2.2 MB / 1.8 MB / 1.6 MB772 KB / 596 KB / 524 KB
Regular16.4 MB4.5 MB2.2 MB / 1.8 MB / 1.6 MB770 KB / 599 KB / 525 KB
Medium16.5 MB4.5 MB2.2 MB / 1.8 MB / 1.6 MB768 KB / 600 KB / 529 KB
Bold17 MB4.6 MB2.2 MB / 1.8 MB / 1.6 MB774 KB / 605 KB / 534 KB
Black17.3 MB4.8 MB2.3 MB / 1.8 MB / 1.6 MB782 KB / 596 KB / 525 KB
Mono Regular16.4 MBなし2.2 MB / 1.8 MB / 1.6 MB770 KB / 599 KB / 527 KB
Mono Bold17 MBなし2.2 MB / 1.8 MB / 1.6 MB774 KB / 606 KB / 534 KB
ファイルサイズの比較

アップロード

ftpやWordpressのファイルマネージャープラグインなどサーバーのファイルを転送できる方法でフォントファイルをファイルを転送します。

転送先は、子テーマのテーマディレクトリのfontsディレクトリが良いと思います。

無いと思いますので、自分で作成してからファイルを転送します。

子テーマのstyle.cssにフォント読み込みを追加

font weightごとに定義を追加しなければならないので必要なものだけ記述します。

以下はNoto Sans JPのサブセットのものです。

モダンブラウザはwoff2に対応しているので、url()の指定はwoff2だけでもいいと思います。

font-displayswapとしていますが、optionalが最近のトレンドらしいです。

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("fonts/NotoSansJP-Thin.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Thin.woff") format("woff"),
	     url("fonts/NotoSansJP-Thin.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("fonts/NotoSansJP-Light.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Light.woff") format("woff"),
	     url("fonts/NotoSansJP-Light.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/NotoSansJP-DemiLight.woff2") format("woff2"),
	     url("fonts/NotoSansJP-DemiLight.woff") format("woff"),
	     url("fonts/NotoSansJP-DemiLight.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/NotoSansJP-Regular.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Regular.woff") format("woff"),
	     url("fonts/NotoSansJP-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/NotoSansJP-Medium.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Medium.woff") format("woff"),
	     url("fonts/NotoSansJP-Medium.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/NotoSansJP-Bold.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Bold.woff") format("woff"),
	     url("fonts/NotoSansJP-Bold.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("fonts/NotoSansJP-Black.woff2") format("woff2"),
	     url("fonts/NotoSansJP-Black.woff") format("woff"),
	     url("fonts/NotoSansJP-Black.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans Mono JP";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonNotoSansMonoJP-Regular.woff2") format("woff2"),
	     url("fonNotoSansMonoJP-Regular.woff") format("woff"),
	     url("fonNotoSansMonoJP-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto Sans Mono JP";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonNotoSansMonoJP-Bold.woff2") format("woff2"),
	     url("fonNotoSansMonoJP-Bold.woff") format("woff"),
	     url("fonNotoSansMonoJP-Bold.otf") format("opentype");
}

Webフォントをサーバーにアップロードする場合、日本語フォントはファイルサイズが大きいため、サーバーのフォント読み出し速度の影響を受け、逆に読み込みが遅くなる場合があります。

ローカルフォントをpreloadする

フォントをheadの先頭でpreloadすることでフォントの読み込みが高速になります。

CSSの読み込みよりも手前で行う必要がありますので、wp_headの優先順位を”0″にしています。

add_action('wp_head',function(){
?>
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri();?>/fonts/NotoSansJP-DemiLight.woff2" crossorigin>
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri();?>/fonts/NotoSansJP-Regular.woff2" crossorigin>
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri();?>/fonts/NotoSansJP-Medium.woff2" crossorigin>
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri();?>/fonts/NotoSansJP-Bold.woff2" crossorigin>
<?php
},0);

まとめ

Webフォントをローカルにアップロードする方法がおススメな人

  • ページ読み込み時のチラつきを無くしたい
  • CSSでカーニング調整を行いたい

Webフォントの読み込みは毎年進化していますので、常に最新の読み込み方法にした方が良いです。

子テーマにfontsディレクトリを用意して一度転送しておけば、子テーマをコピーすれば他のサイトにも適用できるので便利かもしれません。

Webフォントをサーバーにアップロードして使用することはできますか?

Googleフォントはダウンロードできます。サーバーにアップロードすることで、CDNから読み込まなくてもフォントが使用できるようになります。

Webフォントをサーバーにアップロードする方が高速になりますか?

WebサーバーのSSDにフォントファイルを置いたから必ず読み込みが速くなるわけではないので、ケースバイケースです。実は、CDN読み込みの方が速いことの方が多いです。

Webフォントを使用するとページ読み込み時に文字がちらつくのを止めたい

SWELLの場合は、SWELL設定からページ読み込み時のアニメーションを有効にすると、Webフォントのチラつきが見えなくなります。

他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次