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

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

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

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

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

2023年の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型式で固まったファイルでダウンロードできます。

Google Fonts

Noto Sans Japanese – Google Fonts Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language

アップロード

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

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

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

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

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

@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 300;
	src: url(./fonts/NotoSansJP-Light.otf);
}

@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 400;
	src: url(./fonts/NotoSansJP-Regular.otf);
}
@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 500;
	src: url(./fonts/NotoSansJP-Medium.otf);
}

@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 700;
	src: url(./fonts/NotoSansJP-Bold.otf);
}

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

まとめ

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

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

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

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

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

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

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

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