fontTools.subsetでウェブフォント化して、CSSでサブセットを指定しています。

更新 公開)

fontTools.subsetでウェブフォント

fontTools.subset

fontToolsにはpyftsubsetコマンドもありますが、スクリプトを書きました。

from fontTools.subset import Options, load_font, Subsetter, save_font
subset_options = Options(**_subset_options)
font = load_font("path/to/font_file", subset_options)
subsetter = Subsetter(subset_options)
subsetter.subset(font)
save_font(font, "path/to/outfile", subset_options)

Options

サブセットの内容が指定できます。

ここでグリフも指定できますが、私はSubsetter.populateを使っています。

subset_options = Options(
    flavor="woff2",
    with_zopfli=True,
    layout_features=["*"],
    hinting=False,
    drop_tables=[],
    name_IDs=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],
)

flavorwith_zopfli

ウェブフォントの形式や、変換(圧縮)方法が指定できます。

私は Google ZopfliWOFF2に変換しています。

flavorを指定しなければ、単にサブセット化します。いわゆるウェブフォント形式(WOFF、WOFF2)には変換されません。

layout_features

保持する OpenType Layout features が指定できます。

私はすべて保持しています。

hinting

TrueType hinting の保持について指定できます。

私は保持せず、除去しています。

drop_tables

削除する font Tables が指定できます。

私は削除せず、すべて保持しています。

name_IDs

保持する name IDs が指定できます。

load_font

ファイルからフォントを読み込むことができます。フォントはfontTools.ttLib.ttFont.TTFontオブジェクトとして扱われます。

Subsetter

フォントオブジェクトをサブセット化することができます。

私はfontTools.ttLib.ttFont.TTFont.getBestCmapなどですべてのグリフを取得しておいて、分割しています。

subsetter = Subsetter(subset_options)

codepoints = []
for codepoint in font.getBestCmap().keys():
    codepoints.append(codepoint)
from copy import deepcopy
n = 47
while 0 < len(codepoints):
    subset_unicode = codepoints[0:n]
    codepoints[0:n] = []
    subsetter_copy = deepcopy(subsetter)
    subsetter_copy.populate(unicode=subset_unicode)
    font_copy = deepcopy(font)

    subsetter_copy.subset(font_copy)

populate

グリフが指定できます。

私はUnicodeコードポイントで指定しています。

subset

サブセット化できます。

save_font

フォントが保存できます。

unicode-range

使う文字の範囲が指定できます。これにより、指定した文字が使われるときに(必要なときにだけ)フォントが読み込まれるようになります。

/* ASCIIが使われるときにだけ読み込まれるフォント */
@font-face {
    font-family: "My Font";
    font-weight: 100 900;
    src: url(MyFont.1.woff2) format("woff2");
    unicode-range: U+20-7f;
}
/* unicode-range未指定と大差ないフォント */
@font-face {
    font-family: "My Font";
    font-weight: 100 900;
    src: url(MyFont.2.woff2) format("woff2");
    unicode-range: U+0-1f0000;
}