バリアブルフォントをWebフォントとして使う

先月（2021年4月）、日本語のバリアブルフォントがついにリリースされました。
そこで、バリアブルフォントをWebフォントとしてCSSで表示する方法をざっくりとまとめました。
（ニタバル）

バリアブルフォントとは
- バリアブルフォントの利点
Webフォントして使う
参考リンクとツール

バリアブルフォントとは

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。

MDN Web Docsより

『可変フォント』と表記されることもあります。名前の通り可変できるフォントで、数値でフォントの見た目を変えることができます。可変できる要素（太さなど）はフォントによって異なります。

今回リリースされたNoto Sansの場合、通常はウェイトごとにファイルが分かれていますが、バリアブル版は数値指定で太さを変えることができるので、フォントファイルは1つだけになっています。

標準的なフォントとバリアブルフォントの比較

バリアブルフォントの利点

Webフォントとして利用する場合、最大の利点は容量の大幅な削減。
デザインとしては3〜4ぐらいのウェイトを使い分けることが多いですが、日本語の場合、それだけでフォントの容量が20MBを超えることもあります。容量を削減するために使用するウェイトを減らすことさえあると思います。実際に表示される文字データだけを配信するなど、容量を抑える工夫はありますが、それでも日本語フォントは容量の重さが常にネックとなります。
Noto Sansのバリアブル版の場合、日本語サブセットであれば容量は8.1MB。Webサイトで使用するファイルとして考えると軽くはありませんが、日本語フォントとしては画期的な軽さです。

そして、読み込むファイル数を削減することもできます。通常ならウェイトごとにファイルが必要ですが、バリアブルフォントは基本的に1つのファイルでまかなえます。

デザイン面でもメリットがあります。通常だと用意されたウェイトしか使用できませんが、バリアブル版は数値で細かく指定できるので、もう少し太く、などの微調整がしやすくなります。

また、フォントを変えずにCSSで太さなどの値を調整できるので、アニメーションさせることも容易になります。

Webフォントして使う

バリアブルフォントを入手

今回リリースされた日本語バリアブルフォントは、Adobe版の『源ノ角ゴシック』とGoogle版の『Noto Sans』があります。名称が異なるだけでフォント自体は同じなので、後者のGoogle版を使用します。

ダウンロードしたNoto Sansのフォルダ構成

CJKとついているものは、中国語（C）・日本語（J）・韓国語（K）がセットになっています。今回はそこまでは必要としていないので、日本語のサブセット版の『NotoSansJP-VF』を使います。

※ フォントを変換したり直接サーバーにアップする場合、使用許諾の条件を確認してから使用してください。

WOFF形式に変換

フォントファイルをWOFF形式に変換します。そのままでも使用できますが、WOFFはよりWebフォントに適した形式で、容量もさらに抑えることができます。
変換方法はいろいろありますが、今回はWOFFコンバータを使いました。変換後の容量は5.2MB。

CSSでフォントを指定

フォントの準備ができたら、CSSでフォントを指定していきます。
@font-faceにはフォントファイルの情報や、ウェイトの下限と上限も記載しておきます。

セレクタごとの指定では、font-familyと合わせて、font-variation-settingsでバリアブルフォントのプロパティと値を指定します。ウェイトであれば、通常通りfont-weightで指定することもできます。

font-variation-settingsで指定するプロパティ名は、標準で用意されているものもありますが、フォントによって独自のものを用意していることもあります。プロパティ名がわからない時は、Wakamai Fondueのようなツールを使って調べます。

@font-face { 
  font-family: "NotoSansJP";
  src: url("./fonts/NotoSansJP-VF.woff") format("woff-variations");
  font-weight: 100 900;
}
h1 {
  font-size: 3em;
  line-height: 1.4;
  font-family: "NotoSansJP", sans-serif;
  font-variation-settings: "wght" 800;
}
p {
  font-family: "NotoSansJP", sans-serif;
  font-weight: 450;
}

こちらが表示例。

Noto Sans JPを適用したページ

フォントによって異なるプロパティ

Noto Sansのバリアブル版はウェイトのみですが、フォントによっては幅や傾きなども可変できます。
例えば、欧文のバリアブルフォント Roboto Flex には多くの可変要素が組み込まれており、1つのフォントファイルだけで様々な形を表現できます。

@font-face { 
  font-family: "RobotoFlex";
  src: url("./fonts/RobotoFlex.woff") format("woff-variations");
}
h1 {
  font-size: 4em;
  line-height: 1.2;
  font-family: "RobotoFlex", sans-serif;
}
.letters_01 {
  font-variation-settings: "wght" 600, "wdth" 120, "YTAS" 690, "YTDE" -150;
}
.letters_02 {
  font-variation-settings: "wght" 800, "wdth" 80;
}
.letters_03 {
  font-variation-settings: "wght" 300, "slnt" -10;
}
.letters_04 {
  font-variation-settings: "wght" 500, "wdth" 150, "XOPQ" 175, "YOPQ" 45;
}

こちらが表示例。実際にここまでカスタムして使うことはあまりないかもしれませんが、バリアブルフォントの可能性に驚かされます。

Roboto Flexを適用したページ