日本語版 Google フォントをモバイルサイトでのみ無効化する方法

モバイルサイトでは速度のボトルネックになる日本語 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 と指定しましたが、この数値は好みに応じて変更可能です。

お知らせ

【美容院向け】集客を実現するためのホームページデザインをリリース

美容院のためのホームページデザインをリリース。シンプルかつ柔軟なデザインを採用しているため、時間が経っても古臭さを感じさせません。集客に必要なインターネットマーケティング施策(コンテンツマーケティング・SNS・Google Map・リスティング広告)も提供します。

ブログ

【SEO事例】Google で1位を獲得・流入とお問い合わせが増加

SEO案件の成果を紹介。Google においてビッグワードの検索結果で 1 ページ目(10 位以内)に表示させることがご依頼内容。ロングテールでのコンテンツマネージメントにリソースを投入した結果、3 カ月ほどで 1 位を獲得し、ページビューとお問い合わせ件数が急増しました。

ホームページ戦略

インターネットマーケティングの重要性をデータから読み解く

インターネットマーケティング(Webマーケティング)とは、ホームページやウェブサービスを用いて行われるマーケティングのこと。インターネットマーケティングが重要な理由を、各種の調査データを利用しながら解説します。

ホームページ戦略

ホームページ戦略としてのキーワード分析

ホームページを活用して効率よく集客するためには、検索回数が多いキーワード、コンバージョン(購入・お問い合わせ・資料請求など)につながりやすいキーワードを選んだ上で、そのターゲットキーワードを中心にホームページを構成する必要があります。キーワードを選ぶ前段として、そもそもどのようなキーワードが誰によって、どれくらい検索されているかを調査する必要があります。