Webフォント(Googleフォント)の使い方と高速化【容量2%に減】

急いでいる方は↓これをCSSにコピペするだけでOKです。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
body{font-family: 'Noto Sans JP', sans-serif;}

時間のあるかたはもう少しお話をお聞きください。注意点やもっと良くする方法をご説明します。

Webフォントのメリット

デザインの幅が広がる

日本語フォントはそれほど多くありませんが、それでも選択肢は増えています。

また、英字フォントだとさらに多いのでデザインの幅が広がります。

これまで画像で表示していたタイトルもテキストで表示できるようになります。

パソコンでもスマホでも端末に関わらず同じフォントを表示させることができる

「メイリオ」などはWindowsには標準インストールされていますが、Macやスマホにはありません。

一方Webフォントなら端末に依存しないので端末に関わらず同じフォントを表示させることができます。

Webフォントのデメリット

フォント容量が大きい

例えば「Noto Sans JP」をそのまま読み込もうとすると25.7MBにもなります。

25.7MBは一瞬で読み込める容量ではありません。

読み込んでいる間は文字が表示されません。

これではユーザーが離脱するだけでなく、SEO上も不利になる可能性があります。

　

ダブルパンチとして結局読み込めず標準フォントが表示されることがあります。

これではWebフォントを設定した意味がありません。

　

よってWebフォントを使うときはこの容量を軽くすることが重要になってきます。

軽くする方法も含めて「Webフォントの使い方」をご説明します。

Webフォントの使い方

まずは使いたいフォントを探しましょう。以下の記事を参考にしてみてください。

ここでは使い勝手のいい「Googleフォント」の使い方についてご説明します。

　

「Google Fonts」サイトへ行きます。

「Languese」を「Japanese」にして日本語フォントに絞り込みましょう。

日本語のフォントは8種類ありますので、好きなフォントをクリックします。

ここでは「Noto Sans JP」を例に説明します。

ここで「ダウンロードする方法」と「外部読み込みする方法」で設定方法が変わります。

ダウンロードする方法

オススメの方法です。

後述する「外部読み込みする方法」だとIEで読み込めない場合があります。

また、フォントファイルの容量を減らすことができ、高速表示しやすいです。

　

右上の「Download family」をクリックします。

「Noto_Sans_JP.zip」がダウンロードされますので、解凍しましょう。

「Noto Sans JP」の場合、6個のファイルがあります。

ファイルが複数あるのはそれぞれ文字の太さが違うためです。いろいろな太さのフォントを使えるのはメリットではありますが、一方で容量が重くなるという無視できないデメリットがあります。

6つ全部読み込もうとすると25.7MBにもなります。これは一瞬で読み込める容量ではないため、文字がしばらく表示されなかったり、結局標準フォントで表示されてしまうことがあります。

これを避けるためにこのダウンロードしたWebフォントを軽くする方法を紹介します。

※軽くするのは必須ではありませんが、あなたのサイトにとってもあなたのサイトに訪れるユーザーにとってもメリットのある手段です。

Webフォントを軽くする

①1ファイルだけ使う

6つファイルがありますが、全部使う必要はありません。

「Regular（細め）」か「Medium（太め）」だけにしましょう。これだけで25.7MB→4.4MBと容量が1/6になります。

なお「font-weght:bold」を使えば、太いフォントにもできます。

　

②必要な文字だけに絞り込む

フォントファイルには普通使わないような文字や記号などが含まれています。これらを除去 もとい 必要な文字だけに絞り込むことで容量を減らすことができます。

　

サブセットフォントメーカーをダウンロード＆インストールします。

サイトの下部分「Ver3.2.0のダウンロード」をクリックします。

ダウンロードしたファイル「subsetfont320.msi」をインストールしましょう。

インストール後、自動では起動しないのでWindowsメニューから「サブセットフォントメーカー」を探して起動しましょう。

「作成元フォントファイル」の「参照」からダウンロードしたotfファイルを選択します。

「作成後フォントファイル」の「参照」から書き出し先フォルダとファイル名を設定しましょう。元のファイルを上書きするとやり直せなくなるので上書きしないよう別名にしましょう。

「フォントに格納する文字」に下記をコピペします。

こちらは常用漢字とホームページで使う記号です。

　

最後に「作成開始」をクリックして完成です。

　

これで4,384KB→485KBと1/9にまで減らせました。

当初読み込ませようとしていた25.7MBと比べると2%以下になっています。

　

もし表示されていない文字があったらその文字を「フォントに格納する文字」に追加するか、下記「第一水準漢字」をご利用ください。

第一水準漢字
↑こちらは第一水準漢字と各記号が含まれています。

　

逆に、漢字全部もいらない、特定のタイトル・ロゴにだけなど使用する文字が決まっている場合はその文字だけを「フォントに格納する文字」に設定するとさらに容量を減らすことができます。

指定文字は重複して問題ありません。

スタイルシートにCSSを記述する

「サブセットフォントメーカー」で作ったotfファイルをサイトのフォルダに設置したら下記のようにCSSに記述します。

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(NotoSansJP-Medium.otf);
}
body{font-family: 'Noto Sans Japanese';}

@font-faceのfont-familyは任意で設定できます。日本語でも大丈夫です。ここで設定した文字列をbody等に設定するfont-familyと一致させましょう。

@font-faceのsrcはサブセットフォントメーカーで作ったotfファイルを指定します。相対パスに気を付けて設定しましょう。

　

「ダウンロードする場合」についてはこれで完了です。

外部読み込みする方法

ダウンロードせずに外部読み込みさせる方法です。

「高速表示しなくてもいいから手っ取り早く済ませたい！」というかたはこちらの方法がオススメです。

フォントファイルの容量を削ることはできませんが、ユーザーが他のサイトで同じフォントファイルを読み込んでいて、端末がキャッシュ（記憶）していたら読み込む時間が0になるというメリットもあります。

ただし外部読み込むする方法は、IEでは表示されない場合があるようです。IEユーザーがあまり想定されないサイトならこちらの方法でもよいかと思います。

　

さきほどのGoogleフォントサイトにてフォントを選択した画面です。

①フォントの右にある「Select this style」をクリックします。複数の太さを使用する場合は複数選択します。複数選択するとその分読み込む容量が増えるので最小限にしましょう。

1つでいいなら「Regular 400（細め）」か「Medium 500（太め）」がオススメです。

②右に「Selected family」が表示されます。表示されない場合は右上のメニューアイコンをクリックしましょう。

③「Embed」タブをクリックし「@import」タブをクリックします。

④<style>の中身をCSSに記述します。

⑤「font-family・・・」をbodyなどフォントを指定したい箇所に設定します。

複数選択していた場合は「font-weight:400」など太さを設定すると良いでしょう。

　

「外部読み込みの方法」は以上です。

Webフォント使い方まとめ

1. Googleフォントサイトなどからフォント（otfファイル）をダウンロード
2. ダウンロードしたotfファイルから1つだけ選択する
3. サブセットフォントメーカーで軽量化する
4. CSSで設定する

Webフォントを使いつつ軽量化・高速化して快適なサイトにしましょう。

以上、Webフォント(Googleフォント)の使い方と高速化【容量2%以下まで減】でした。