見出しなどFONTを凝りたい箇所を画像書き出しして配置していたのも昔の話し、今はデバイスフォントでも綺麗だし、WEBフォントでさらにFONTを選べるようになりました。
しかし、仕事でWEBサイトを構築しているときに「ページ読み込みが遅くなる」＝「SEOに影響が」「ユーザーの離脱率が跳ね上がる」との懸念からWEB FONTの使用を避けることも何度かありました。
実際各社の日本語WEB FONTでどの程度読み込みスピードに影響が出るのか？ 漠然とではなく、実際に検証してみます。
In this article, I am verifying the speed check of Japanese Web Font;-)
目次
デモページを作成
デモページのテキストは宮沢賢治の「オッペルと象」です。文字数はざっと5700文字。岩手で育つと何かっちゃあ宮沢賢治を読まされるんです。
CSS等の読み込み、キャッシュの影響を避けるため、analytics.jsとWEB FONT使用時のjs以外の記述は無くし、font-sizeやmarginなどはstyleタグ、あるいはインラインで指定しています。
デバイスフォント
まずは、ただのデバイスフォントです。
これはこれで慣れて親しんだFONTなので見やすいですね。
デバイスフォントのデモページ
Google 日本語FONT
日本語WEB FONTの代表格、Googleさんです。
無料で使えることもあり、ここのWEB FONTを見出しやMVなどポイントで使うパターンが多いかと思います。
使い方
使い方は簡単です。
使用したいFONTの①をheadタグ内に、②をCSSに追記します。
WEB FONTにしたい要素に②のclassを当てるだけです。
「見出しは全部WEB FONTにしたい」という場合は、
h2,h3,h4,h5 {font-family: "Sawarabi Mincho";}のように記述した方が早いかもしれません。
FONT反映後
今回はさわらび明朝を使用してみました。明朝体とはいえ文字の太さを確保して視認性を高めています。ちょっと活版っぽいのも味がありますね。
（このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。）
Google日本語フォントのデモページ
Google Fonts
思い出しました、WEB FONTといえばNotoもありました！ どう扱いが違うのかちゃんと理解してないのですが、こちらは日本語FONTではなく普通のGoogle Fontsで選択できます。
フリーで使えてカチッとした明朝体を探していたので、Noto Serif JPで試してみます。
使い方
サイトのUIが「Google 日本語FONT」とは異なりますが、使い方は基本的に一緒です。
① 使用したフォントを選択（複数の場合は複数を選択）
② 右側のタブをEmbedに切り替える
③をheadタグに、④をCSSに追記。
こちらは、④にclassが付いてないので、自分で任意のclassを作るか、FONTを当てたいセレクタに付け加えます。
FONT反映後
漢字が四角いけど、アルファベットや仮名は柔らかい雰囲気です。
（このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。）
Google Fontsのデモページ
Adobe Web Font
Adobe CCを契約してるなら追加料金無しで使えます。
使い方
公式が使い方ページを用意してるので、こちらをご参照ください🙂
FONT反映後
TB新聞明朝 Stdを使用してみました。他のFONTより体が大きい分、字間は詰まって見えます。
Adobeフォントのデモページ
モリサワWEBフォント
さくらインターネットやX Serverなど、契約しているサーバーによってはモリサワが使えます。
リュウミンや新ゴなどDTPで馴染みのFONTが揃っています。
使い方
まずコントロールパネルで利用するドメインの設定します。
さくらインターネット、XserverでWordpressをインストールした場合は最初からデフォルトでプラグインが入っています。無い場合はダウンロードできます。
WPではなく静的ページに直接適用した場合は、他のWeb FONTと同様にheadタグ、CSSに追記する必要がありますが、記述内容は上記サイトをご参照ください。
用意されたFONTがjsにひとまとめになっているので、複数種類のFONTを使用したい場合に追記するタグが煩雑にならずに良いですね。
FONT反映後
ナウ-GMを使用してみました。文字がはっきりとしてるし丁度良い丸みでなかなか見やすいですね。
モリサワフォントのデモページ
測定
ここでの測定結果は2019年8月の時点のものです。その後、WEB FONTを提供している各社がスピードを改善している可能性も無いとはいえません。
Chromeの機能拡張Lighthouseで表示スピードを測定していきます。
Time to Interactiveという項目を見ます。ページにアクセスしてから、ページを完全に読み込み、表示し終わるまでの時間のことです。
ネット環境によって結果にブレが出るので、ご自身の環境でも測定してみてください。
| デフォルト | Google日本語 | Adobe | モリサワ | |
|---|---|---|---|---|
| 1.1秒 | 1.8秒 | 2.0秒 | 2.8秒 | 2.3秒 |
デバイスフォント
Google 日本語FONT
Google Fonts
Adobe FONT
モリサワ FONT
体感ではAdobe FONTが、ひとまずページを読み込んで表示させてからFONTを反映させています。
Google FONTとモリサワはFONTが反映されるのとページが表示されるのがほぼ同時です（その分、ページ読み込み時の真っ白な状態がちょっとある）。
Adobe FONTはダイナミックサブセットというページ内で使用している文字を全部一文字ずつダウンロードしています。
今回のデモページのように使用文字の種類が多いと重くなってしまいますが、見出しだけとかワンポイントで使うといいかもしれません。
Google 日本語FONTは早期アクセス時はちょっと遅かったのですが、正式版になるにあたりFONTのデータを細分化し、分割ストリーミングの形で素早くダウンロードできるよう改善がされています。
じゃあ、見出しだけWEB FONTだと表示スピードは早くなるのか？
長くなるのでキャプチャは貼りませんが、先ほどは全部のテキストをWEB FONTに指定していたのをH1〜H5のみの指定に変更、本文はデバイスフォントのデモページを作成し、こちらで再度表示速度を測定してみます。
20201226追記： Google Fontで見出しのみのように当てる文字数が限られる場合に、読み込みファイルサイズを軽減する技を使ったデモページを増やしました。
ざっくり説明すると、Font読み込みのリンクに使いたい文字を付加することで、その文字分のフォントファイルのみ読みこまれるのです。
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap&subset=japanese&text=その6ー軽量版GogleフォントNtSerifJP各Web fnt使用時表示スピド検証ためデモページオツベルと象第一日曜二五" rel="stylesheet">この技について詳しくはColissさんの記事をご覧ください。
Google日本語フォントのデモページ
Google Fontsのデモページ
Adobeフォントのデモページ
モリサワフォントのデモページ
軽量版Google Fontsのデモページ
↑こちらが追加した軽量版Google Fontsのデモページです。
2019年8月計測
| デフォルト | Google日本語 | Adobe | モリサワ | |
|---|---|---|---|---|
| 1.1秒 | 1.9秒 | 1.8秒 | 2.3秒 | 1.7秒 |
Google 日本語FONTだけ遅くなりました。測定結果に若干揺らぎがある可能性もありますが、基本的に表示スピードが早くなるようです。
2020年12月計測
| デフォルト | Google 日本語 |
Adobe | モリサワ | 軽量版 |
|
|---|---|---|---|---|---|
| 1.8秒 | 3.6秒 | 4.1秒 | 1.8秒 | 2.0秒 | 2.5秒 |
元からあったデモページのスピード計測自体が以前の計測と結構違うので、参考までに……という感じですが、丸ごと読み込んだGoogle Fontsの場合と使用文字だけ読み込んだ軽量版Google Fontsで大分数値が違いますね。