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型式で固まったファイルでダウンロードできます。
アップロード
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フォントの読み込みは毎年進化していますので、常に最新の読み込み方法にした方が良いです。
子テーマにfontsディレクトリを用意して一度転送しておけば、子テーマをコピーすれば他のサイトにも適用できるので便利かもしれません。
コメント