Webフォントの基本をおさらい

Webフォントとは

簡単に言うとサーバーにアップロードされたフォント。

現在のところ、全てのOSやデバイスにデフォルトでインストールされている共通のフォントが無いので、Webフォントを利用することによって共通のフォントを表示できるようになります。

デザイン上のメリットは様々あるとは思いますが、実装上のメリットとしてはフォントの違いによるレイアウト崩れの心配が少ないのが一番大きいと思います。

Noto Sans JPとは

Noto Sans Japaneseという名前のGoogle Fontsで公開されている日本語Webフォント。URLがNoto+Sans+JPとなっているせいか、よく「Noto Sans JP」と呼称されています。（以下、同様に呼称します）

Noto Sans 「Japanese」とはいうものの、ひらがな・カタカナ・漢字の他に、ラテン文字・キリル文字・ギリシャ文字・ハングルもサポートされているようです（知らなかった！）

オープン・フォント・ライセンス（OFL）で配布されており無料で商用利用できます。

バリアブルフォントとは

太さの違いやイタリック体などのスタイルの違いが別ファイルになっていたものをひとつのファイルで管理できるようになっており、複数の軸（axis）と細かい数値による高度なカスタマイズを可能にしたものがバリアブルフォント（variable fonts）です。

デザインの自由度が上がるだけでなく、実装面でもファイルサイズが軽くなったり実装が容易だというメリットがあります。

Google Fonts CSS APIを利用する

公式サイトで使用したいフォントのページを開くと右上に「Get font」というボタンがあります。これをクリックすると、現在選択しているフォントの一覧が表示されます。ECサイトのカートのような印象です。

この時、バリアブルフォントでないものはフォント名の横に「Static」、バリアブルフォントの場合はフォント名の横に「Variable」と表示されます。

デフォルトではすべてのスタイルが選択されている状態になっているので、まずは「Get embed code」をクリックしましょう。

すると右側に記述するコード、左側に選択しているフォントの一覧が表示したEmbed codeのページが開きます。

Staticフォントの場合

Staticフォント（バリアブルフォントでないフォント）の場合、利用するスタイルを正しく選択していないと読み込むファイルサイズが膨大になってしまいますので、必ず必要なスタイルだけ選択するようにしてください。

Embed codeのページで各フォントの「Change styles」をクリックすると、現在選択しているスタイルがトグルボタン（スイッチ）で表示されます。

たとえばRobotoのようなスタイルの多いものを選択している場合は、フォント名の右下のスイッチ（一番上のスイッチ）をクリックして一旦すべてオフにします。すると、標準のスタイル（Robotoの場合Regular 400）だけが選択された状態になりますので、そこから必要なスタイルだけをオンにしていく方が手数が少ないのでオススメです。

Variableフォントの場合

バリアブルフォントの場合は、各軸に対して「Full axis」か「One value」かを選択できるようになっています。

もちろんFull axisよりOne valueの方が読み込むファイルサイズは小さくなります。

ちなみにFull axisを選択すると「wght@100..900」のように100から900までのウェイトが利用できる状態のコードが提示されますが、400,500,700だけ必要な場合は「wght@400..700」としてもOKです。どちらでも読み込むファイルサイズは変わりません。

さらに、500と700のみ必要な場合は、以前の通り「wght@500;700」としても大丈夫ですし、563のみ必要な場合は「wght@563」としても大丈夫です。

フォントファイルをセルフホスティングする

Webサイトと同じサーバー上にフォントファイルをアップロードして利用したい（セルフホスティングする）場合は、まず使いたいフォントのページの「Get font」をクリックして「Download all (n)」（nは選択しているフォントの数）というボタンをクリックします。

Staticフォントの場合

ダウンロードしたフォルダの中の必要なスタイルのファイルをサーバーにアップロードします。

Variableフォントの場合

ダウンロードしたフォルダを開いて、「フォント名-VariableFont_軸名.ttf」をサーバーにアップロードします。
Noto Sans JPの場合は「NotoSansJP-VariableFont_wght.ttf」です。

フォントファイルを圧縮する

ダウンロードしたきたファイルの拡張子は.ttf、つまりTrueTypeフォントファイルになっています。

詳細についてはここでは省きますが、この.ttfをWeb用に圧縮したものでWOFF (Web Open Font Format)というものがあります。WOFF2という圧縮アルゴリズムが異なるものもあります。

フォントファイルをセルフホスティングする場合にはファイル形式をWOFF（またはWOFF2）に変換することでファイルサイズを削減できます。

TrueTypeフォントファイルからWOFFに変換するには、WOFFコンバータなどを利用します。

サブセット化する

WOFFに変換してもまだ大きすぎるファイルサイズを削減するために、サブセット化という方法がよく紹介されています。よく使う文字だけに限定してしまおうという手法です。

漢字を常用漢字とJIS第1水準だけに絞るというのが多いと思いますが、残念なことに私（この記事の筆者）の苗字に使われている漢字がJIS第2水準なので除外されてしまいます。

もしこの方法を利用される方はちゃんと必要な文字が含まれているか確認してから利用することをお勧めします。（私のようなパターンは稀だと思いますが）

サブセット化するには、サブセットフォントメーカーなどを利用します。

補足情報

バリアブルフォントのCSSプロパティ

font-variation-settings: "wght" 450;

上記のような記述をご存知の方も多いかと思いますが、weight軸に限っては今まで通りfont-weight: 450;で大丈夫のようです。

Google Fonts CSS APIは重い？

これまで日本語Webフォントを読み込む方法でもっとも軽くなる方法として「サブセット化」する方法が紹介されてきました。

しかし前述したようなサブセット化ではまだまだファイルサイズが大きく、現時点ではGoogle Fonts CSS APIを利用した方が軽いかもしれません。

Google Fonts CSS APIではunicode-rangeというプロパティを利用して、120もの文字セットに分けて配信しています。

つまり指定された範囲内に文字がない場合はそのフォントファイルを読み込まないので、サブセット化したファイルを読み込むより軽く済むことがあるということになります。

もしセルフホスティングすることが必須でない場合は、Google Fonts CSS APIを利用してどちらが軽いか比べてみるのもいいかもしれません。

ダイナミックサブセッティング

有料のWebフォント配信サービスの中にはページ内で使用されている文字でサブセット化してくれる「ダイナミックサブセッティング（動的サブセット化）」を採用しているものがあります。Adobe FontsやFONTPLUSがそれに当たります。

私は利用する機会に恵まれないのでどれほどのものかをまだ実感したことがないので、利用できるプロジェクトに参画してみたいものです。

Web Font Loader

GoogleとTypekitが共同開発したWeb Font Loaderを利用すれば、Webフォントの読み込みを制御することも可能です。

フォントが読み込まれるまでローディング画面を表示したい場合などに便利です。

CSS Font Loader API

CSS Font Loader APIを利用してフォントの読み込みを検知できます。
使い方などは下記がとてもわかりやすいかと思います。