@koshian's Tech Log

主に日本語に関する技術などこちらに書こうかと

サブセットWebFontを作成してwoff形式に変換し、ブログで利用するまでの記録。

表題のことをやろうと思ったのだがぱっと見つかるツールが動かなかったりなどして試行錯誤。 とりあえず Google で作られたと思しきツール群があって、これはどうやら動く様子。

まずはサブセットフォントを作らないといけない。使う文字だけね。

$ pip install FontTools
$ pyftsubset ~/Library/Fonts/KouzanMouhituFontOTF.otf --text='狐の王国'
$ cd ~/Library/Fonts
$ ls -lh KouzanMouhituFontOTF.otf*
-rwxr-xr-x@ 1 koshian  staff   5.8M Feb 27  2010 KouzanMouhituFontOTF.otf
-rw-r--r--+ 1 koshian  staff   2.6K Dec 31 06:00 KouzanMouhituFontOTF.otf.subset

4文字だけなのでえらい小さくなった。さらにこれを Web で使うために woff2 をインストールする。

github.com

Homebrew 用の formula を書いてくださってる方もいるようだ。

github.com

というわけで brew install woff2 すると woff2_compress が使えるようになる。

$ woff2_compress KouzanMouhituFontOTF.otf
Processing KouzanMouhituFontOTF.otf => KouzanMouhituFontOTF.woff2
$ woff2_compress KouzanMouhituFontOTF.otf.subset
Processing KouzanMouhituFontOTF.otf.subset => KouzanMouhituFontOTF.otf.woff2
$ ls -lh KouzanMouhituFontOTF.*
-rwxr-xr-x@ 1 koshian  staff   5.8M Feb 27  2010 KouzanMouhituFontOTF.otf
-rw-r--r--+ 1 koshian  staff   2.6K Dec 31 06:00 KouzanMouhituFontOTF.otf.subset
-rw-r--r--+ 1 koshian  staff   2.0K Dec 31 06:52 KouzanMouhituFontOTF.otf.woff2
-rw-r--r--+ 1 koshian  staff   3.7M Dec 31 06:52 KouzanMouhituFontOTF.woff2

フォントの置き場所は Google Drive を使うことにした。はてなブログでいろいろアップロードしたいとき という記事を参考に、 public_html を Google Drive に作成、公開設定で一般公開しておく。

$ cp KouzanMouhituFontOTF.otf.woff2 ~/Google\ Drive/public_html/KouzanMouhituFont.sub.org.foxking.woff

これであとは CSS に font-face を書くだけ。

@charset "utf-8";
@font-face {
    font-family: "衡山毛筆";
    src: url('https://www.googledrive.com/host/0Bxp6_1slWwEfNlhPY1N5MmpPZGM/KouzanMouhituFont.sub.org.foxking.woff') format('woff');
}

h1 {
    font-size: 72px;
    font-family: "衡山毛筆", cursive;
}

うむうむ、ちゃんと表示された。

しかし今回は商用利用可の無料フォントを使ってみたけれども、これ商用フォントだとどうライセンス受けたものかね。webfont として数文字利用する場合はいくら、みたいなライセンスもあるんだろうか。