1️⃣
バリアブルフォントをfonttoolsでサブセット化する
バリアブルフォントはサブセットフォントメーカーではサブセット化できないので、fonttoolsを使用してサブセット化した。webフォントが楽だけど、ファイルが膨大で重くなりがちなので、可能ならサブセット化しておきたい。
またしても自分が忘れないように書くので、コマンドツールようわからんという人向け。
必要なもの
- python（pip）
- fonttools
pipを使うのでpythonが必要になる。homebrewでインストールしておこう。homebrewがない場合はpythonの公式サイトからDLすることもできる。
brew install python
アップデートはこう。
brew upgrade python
サブセット化手順
fonttoolsをインストール
pip install fonttools zopfli brotli
サブセット化する
適当なフォルダを作ってその中に、材料を全部いれて生成されるwebフォントも出るようにすると、初心者にはわかりやすいかなと思います（macの場合は、フォルダをターミナルにドラッグするとそこで作業が始められる）。
pyftsubset "original.ttf" \
--unicodes="U+0020-007E" \
--layout-features="*" \
--flavor="woff2" \
--with-zopfli \
--output-file="subset.woff2"
-
pyftsubset "original.otf"
元になるフォントファイル -
--unicodes="U+0020-007E""
サブセット化後のフォントに含みたい文字。複数いれたいときはカンマで区切る。
| ユニコード | |
|---|---|
| U+0020-007E | 基本的な半角英数字と記号 (ASCII) |
| U+3000-30FF | 全角スペース、句読点、ひらがな、カタカナなど |
| U+4E00-9FAF | CJK統合漢字（一般的に使われる漢字） |
| U+FF01-FF60 | 全角の英数字や記号の一部 |
| U+FF65-FF9F | 半角カタカナ |
-
--layout-features="*"
OTF情報を保持するためのオプション。CSSでfont-feature-settingを使わないならなくてもいいけど。 -
--flavor=woff2
作成したいフォント形式。 -
--with-zopfli
さらにフォントを圧縮するGoogleのアルゴリズム。 -
--output-file="subset.woff2"
出力後のファイルパス・ファイル名。
CSSの書き方
これでフォント名を指定すれば、あとはいつもどおり使える。
@font-face {
font-family: 'subset font'; /* フォント名を指定 */
src: url('subset.woff2') format('woff2');
font-display: swap;
}
まとめ
たとえばしっぽり明朝B1だと、15Mが1M程度に圧縮されるのでかなりの改善になると思います。
参考
Discussion