モバイルサイトでは速度のボトルネックになる日本語 Web フォント
日本語版の Google Fonts は長らくベータ版として提供されてきましたが、2018 年 9 月から正式版として提供されるようになりました。
Google Fonts などの Web フォントを活用すれば Web サイトのデザインや文字の読みやすさを改善できる反面、日本語 Web フォントはサイズが大きくなりがちであることから、ページの読み込み時間が長くなってしまうというデメリットもあります。
Google はページの読み込み時間を以前よりも重視しています。特に、スマートフォンやタブレット用のモバイルサイトではその傾向が顕著で、Google が提供する PageSpeed Insights でページ速度を計測すると、パソコンサイトよりもモバイルサイトにおいて、日本語 Web フォントを利用しているときの速度スコアの落ち込みが顕著です。
Androiod や iOS など、モバイルデバイスに搭載されている OS のシステムフォントは Windows のシステムフォントと比べて十分綺麗で読みやすいため、スマホサイトでは日本語 Web フォントを無効にしてもデザイン性はそれほど損なわれません。
そこで、Web サイトをレスポンシブデザインで設計する際に、パソコンサイトでは日本語 Web フォントを有効にし、モバイルサイトでは日本語 Web フォントを無効にする方法を解説します。
Google フォントの呼び出し
まずは日本語版の Google Fonts を呼び出します。以下では Noto Sans JP という Web フォントを例として使いますが、他のフォントの場合も方法は同じです。日本語版 Google Fonts の一覧は以下から確認できます。
日本語版Googleフォントの一覧（外部リンク）Google Fonts を呼び出す方法は 2 通りです。CSS でフォントを呼び出す場合には CSS 中に以下を記述します。
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
HTML タグでフォントを呼び出す場合には<head></head>の間に以下を記述します。Wordpress の場合には使っているテーマの header.php テンプレートを編集してください。
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
Google フォントを使う場所を指定する
Web サイトの本文中で、先ほど呼び出した Web フォントを使う方法を解説します。
まず、本文中で Web フォントを使いたい場所に適当な class もしくは id を付与します。以下の例では webfonts という class を該当箇所に付与しています。
<p class="webfonts">この文には Web フォントを適用します。</p> <p>この文には Web フォントを適用しません。</p>
続いて、CSS にスタイルを記述します。以下の例では、先に指定した webfonts という class が付与された要素を Noto Sans JP で表示するよう命令しています。
.webfonts {
font-family: "Noto sans JP", sans-serif;
}
上手くいかない場合には、以下のように !important ルールを配置してみてください。
.webfonts {
font-family: "Noto sans JP", sans-serif !important;
}
Google フォントをモバイルサイトでのみ無効化する
このままではパソコンサイトとモバイルサイトの双方で Google Fonts が有効になるため、モバイルサイトでのみ無効化するために先の CSS を以下のように書き換えます。
@media screen and (min-width:1025px) {
.webfonts {
font-family: "Noto sans JP", sans-serif !important;
}
}
これは『画面の解像度が横幅 1025px 以上の場合に限り、webfonts という class が付与された要素を Noto Sans JP で表示する』という命令です。Google Fonts を使用するか否かの境界である解像度としてここでは 1025px と指定しましたが、この数値は好みに応じて変更可能です。
