こんにちは！フロントエンドエンジニアの市川です。
今回はWebフォントについてのお話です。Webフォント＝重いというイメージがあるかもしれませんが、高速で表示させる為のテクニックをご紹介したいと思います。
目次
Webフォントとは？
Webフォントが無かった時代、サイト上の文字はユーザの端末内に収録されているフォントでしか表示することができませんでした。
しかし、Webフォントの登場により、サーバ上に置かれたフォントデータをユーザが読み込むことで、ユーザの環境に左右されることなく、任意のフォントを表示させることができるようになりました。
フォント1つでサイトのイメージもガラッと変わるので、どんな環境でも同じデザインが表示されるのは、ユーザにとっても制作者にとっても嬉しいですよね！
Webフォントのサービスで有名なのは、やはり「Google Fonts」でしょうか。無料で商用利用できるため、デザイナーさんもこの中からフォントを選んで使っていることが多い印象です。
Webフォントを使う際の注意
大変便利なWebフォントですが、日本語で使う場合には注意が必要です。なぜならば…
日本語は、漢字・ひらがな・カタカナと、大変多くの文字が存在します。これに比例して、フォントデータのサイズも膨大なものになるのです。
その膨大なフォントデータをサーバから読み込むとなると、ページのローディング時間が長くなり、ユーザ体験を損ねてしまう事態になりかねません。これでは本末転倒ですね…。
ただ、諦めるのはまだ早いです！Webフォントを高速に読み込むための方法はいくつかありますので、今回は高速化のポイントを3つご紹介したいと思います。
高速に読み込むためのポイント
1. サブセット化
サブセット化とは、フォントデータから必要のない文字を間引くことです。例えば、漢字の中で日常で使うものはごく限られています。必要のない文字を間引くことでフォントデータの容量を小さくし、読み込み速度を速くすることができます。基本的には「第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな」を用意しておければ問題ないかと思います。色々な方がサブセット化したフォントを提供して下さっていますので、「フォント名 サブセット」と検索すれば入手できるかと思います。私はこちらのサイトのフォントを使わせていただきました。HiroyaYabiku/Noto-Sans-Japanese
2. 文字の太さの絞り込み
フォントの種類によっては文字の太さのパターンがいくつか用意されている場合があります。例えば、Noto Sans CJK JPの場合は7種類（！）ものパターンが用意されています。しかし、サイトの中でこれら全てのパターンを使うシチュエーションは稀かと思います。全てのパターンを読み込むとローディング時間も長くなるため、使用する太さのフォントデータだけを読み込んだほうがベターです。Google FontsなどのCDNを使用する場合は、太さのパターンを個別に読み込めないこともあるので、必要な太さのフォントデータをWeb上からダウンロードし、自サーバから読み込ませる方法が良いかと思います。
3. ローカルフォントの指定
サブセット化したとはいえ、やはりサーバから読み込むため多少の読み込み遅延が発生してしまいます。そこで、もしユーザの端末（ローカル）上に同じフォントがあった場合はそちらを優先的に読み込み、無かった場合はサーバ上のフォントを読み込むように設定しておきます。この設定はCSSのfont-faceで行います。
下記はNoto Sans CJK JP Regularを読み込む際の例になります。
「src: local…」の部分で設定しています。3つほど設定している理由としては、ブラウザがどのフォント名を使用するのかは、プラットフォームやフォントによって異なる※1 ためです。
※1・・・ソース元：W3C フォントリファレンス：src記述子
おわりに
「Webフォントは重いから使うのはちょっと…」と諦めていた方、この機会に是非使ってみてはいかがでしょうか。また、すでにWebフォントを使っていらっしゃる方も、今回紹介したポイントを正しく設定できているか、もう一度チェックし直してみても良いかもしれません！
今回は以上になります。最後までお読み頂きありがとうございました！