1️⃣

バリアブルフォントをfonttoolsでサブセット化する

2025/04/17に公開

バリアブルフォントはサブセットフォントメーカーではサブセット化できないので、fonttoolsを使用してサブセット化した。webフォントが楽だけど、ファイルが膨大で重くなりがちなので、可能ならサブセット化しておきたい。
またしても自分が忘れないように書くので、コマンドツールようわからんという人向け。

必要なもの

python（pip）
fonttools

pipを使うのでpythonが必要になる。homebrewでインストールしておこう。homebrewがない場合はpythonの公式サイトからDLすることもできる。

brew install python

サブセット化手順

fonttoolsをインストール

pip install fonttools

サブセット化する

適当なフォルダを作ってその中に、材料を全部いれて生成されるwebフォントも出るようにすると、初心者にはわかりやすいかなと思います（macの場合は、フォルダをターミナルにドラッグするとそこで作業が始められる）。

pyftsubset "original.ttf" \
    --text-file="chars.txt" \
    --layout-features="*" \
    --flavor="woff2" \
    --output-file="subset.woff2"

pyftsubset "original.otf"
元になるフォントファイル
--text-file="chars.txt"
サブセット化後のフォントに含みたい文字。一般的には半角全角記号英数字、ひがらなカタカナ、第一水準漢字でいいと思う。「第一水準漢字」などで調べるといろいろでてくる。
--layout-features="*"
OTF情報を保持するためのオプション。CSSでfont-feature-settingを使わないならなくてもいいけど。
--flavor=woff2
作成したいフォント形式。
--output-file="subset.woff2"
出力後のファイルパス・ファイル名。

CSSの書き方

これでフォント名を指定すれば、あとはいつもどおり使える。

@font-face {
  font-family: 'subset font'; /* フォント名を指定 */
  src: url('subset.woff2') format('woff2');
  font-display: swap;
}

まとめ

たとえばしっぽり明朝B1だと、15Mが1M程度に圧縮されるのでかなりの改善になると思います。