WEBフォント使用時の最適な設定を考える

WEBフォントを使うときの正解を探る

WEBサイトの表示でフォントを指定するときにはWEBフォントを使います。

WEBフォントとは、使いたいフォントをサーバーにUPし、それをユーザーにダウンロード(自動でダウンロードされる)させて表示させる方法です。

英語だったら文字数が少ないので、そこまで問題はないのですが、日本語の場合、ひらがな、カタカナ、漢字とあり、フォントファイルが重くなり、表示速度に影響がでます。

表示速度を優先するのであれば、使わない方がいい、と言われるほどです。

だけどさ、使いたいわけですよ。WEBフォントを。
デフォルトのフォントじゃなくて、ちょっとこだわってます感をだしたいんですよ。
(端末に依存しないで同じフォントを表示できるというメリットがあります。)

というわけで、WEBフォントを使用する際のベストプラクティスを探りたいと思います。

あらかじめ断わっておくと、これは私の主観で正しいかどうかはわかりません。
また、時がたてばここで紹介している内容と違うことをやるかもしれません。

WEBフォントの簡単な使い方

WEBフォントの利用方法として、一番簡単なのはGoogleのCDNからWEBフォントを読み込む。
これが手軽で簡単です。

CDNから読み込む手順は、いろんなサイトで紹介されているので省きます。
参考サイトは以下。

読み込み中

CDNではなく自サーバーに設置するならサブセット化が必須

CDNではなく、自分のサーバーにWEBフォントを用意するのであれば、サブセット化という軽量化が必須です。

日本語の漢字は数が多いので、常用漢字(厳密には違うけど)以外は用意しないで、ファイルを軽量化するのがサブセット化です。

これもいろんなサイトで手順が紹介されているので省きます。
参考サイトは以下。

読み込み中

サブセット化した.otfファイルをwoffとwoff2で変換することで、
NotoSansJP-Regular.otf(4,442KB)が、
NotoSansJP-Regular.woff(404KB)、
NotoSansJP-Regular.woff2(359KB)
まで減量できます。

表示速度を考慮してベストな読み込みを考える

まず、最初の選択としてCDNを使うか、自分のサーバーに設置するかの二択があります。

私は自分のサーバーにサブセット化したWEBフォントを設置しました。

自サーバーにフォントを設置するメリット

一番の理由は、フォントの表示方法を色々と設定できるようにするためです。
あとで紹介しますが、WEBフォントの呼び出し方法は色々あります。

次に、第三者サーバーから読み込むと、「今は無料だけどやっぱり有料にするわ」と言われたときにめんどくさいから。

CDNを利用すると、同じところから呼び出してるので、他のサイトで読み込んだ時にキャッシュされる、とかだったら利用価値が高いんですが、第三者サイトのWEBフォントはキャッシュされない(正確にはそのキャッシュを利用できない)ので、あまり意味がないようです。

フォントファイルのフォーマットはwoff2 & woff

WEBフォントのフォーマットは複数存在します。
ブラウザ間で使える使えないがあるためです。

最近ようやくIEが引退されたので、woff2だけで良いという情報をみたんですが、な～んかよくわからんのですが、私の環境だとwoff2だけにするとフォントが置き換わるという事象があります。

原因をずーっと調査しても全然わからないので、woff2とwoffの両方を使っています。

ちなみに環境はchorome 102.0.5005.115（Official Build（64 ビット）
なんでなんだろう。

WEBフォントをHTMLに読み込む最適解をさぐる

ようやく本題にたどり着きます。

WEBフォントを使う上で考慮すべき点は2つ。

読み込みの遅さと、フォントの置き換わりによるCLSの軽減です。

WEBフォントの読み込みを少しでも早くする

WEBフォントの読み込みを可能な限り早くするために、まずプリロードで読み込みます。

<link rel="preload" as="font" href="/font/NotoSansJP-Regular.woff2" crossorigin>
<link rel="preload" as="font" href="/font/NotoSansJP-Bold.woff2" crossorigin>

preloadしたフォントファイルをCSSよりも先に読み込ませます。

次にfont-faceでフォントの読み込み指定を書きます。

@font-face {
font-family: "NotoSansCJKjp";
font-weight: normal;
font-display: block;
src: local("Noto Sans CJK JP Regular"),
url(/font/NotoSansJP-Regular.woff2) format("woff2"),
url(/font/NotoSansJP-Regular.woff) format("woff");
}

@font-face {
font-family: "NotoSansCJKjp";
font-weight: bold;
font-display: block;
src: local("Noto Sans CJK JP Bold"),
url(/font/NotoSansJP-Bold.woff2) format("woff2"),
url(/font/NotoSansJP-Bold.woff) format("woff");
}

私のサイトでは、ウェイト違いを2つ読み込んでいます。
両方ともサブセット化してwoff2に変換してあります。