webフォント用のサブセット生成のこと

概要

  • 任意の文字のwebフォントサブセットを、複数の端末xブラウザに適用したい。
  • 古いスマホブラウザに対応するためには、woffだけではなく、ttfも出すことが必要(IE8以下は eot ってやつもいるらしい)

fonttools セットアップ

woff 出力

woff を出力。woff2 を出したいときは、flavorを変える

$ pyftsubset NotoSerifCJKjp-Regular.otf \
    --text-file=subset.txt \
    --layout-features='*' \
    --flavor=woff \
    --output-file=NotoSerifCJKjp-Regular-sub.woff

出力ファイルの形式は file コマンドで確認

元ファイル

$ file NotoSerifCJKjp-Regular.otf
NotoSerifCJKjp-Regular.otf: OpenType font data

出力後ファイル(woff2)

$ file NotoSerifCJKjp-Regular-sub.woff2
NotoSerifCJKjp-Regular-sub.woff2: Web Open Font Format (Version 2), CFF, length 7408, version 1.65

番外編: ttf 出力

fontforge をつかう

$ brew install fontforge

conv.sh

Open($1);
CIDFlatten();
Generate($1:r+".ttf");
Quit(0);
$ fontforge -script conv.sh ../NotoSerifCJKjp-Regular-sub.otf
$ file NotoSerifCJKjp-Regular-sub.ttf
NotoSerifCJKjp-Regular-sub.ttf: TrueType font data

確認

f:id:takudo_dev:20180106210113p:plain

字詰めを有効化

  font-feature-settings:"palt" 1;

f:id:takudo_dev:20180106210126p:plain

実際に使う際のライセンス表記

google の Noto 系のライセンスは「SIL Open Font License (OFL)」というやつだが、 このあたり が参考になりそう

参考

qiita.com

developer.mozilla.org

TrueTypeとOpenType - フォント専門サイト fontnavi

eot について www.hirok-k.com

android の ttf webcre8.jp

google の Noto 系のライセンス、「SIL Open Font License (OFL)」のライセンスの表記のこと Web フォントとライセンス | Yomotsu net

otf -> ttf 変換 qiita.com