Help us understand the problem. What is going on with this article?

日本語webフォントサブセット化について

More than 1 year has passed since last update.

きっかけ

Android 端末では、font-familyで明朝体の指定をしたフォントが、ゴシック体で表示されてしまった。
端末間で同じ表示をさせるためには、webフォントを使用するしかない。
しかし、日本語のwebフォントをそのまま使おうとすると非常に重くなり、離脱率の原因にもなるため軽量化して使う必要がある。

取り組んだこと

1. webフォントをサブセット化について調査

  • サブセットフォントメーカー→OTF情報が削除されてしまう
  • 日本語フォントをサブセット化したデータを配布などもあったが、こちらもサブセットフォントメーカーでサブセット化されたものなので、同様にOTF情報を持っていなかった

和風サイトの案件などで明朝体を使っているため、日本語webフォントの重さを解決しつつ、OTF情報を残したい

2. fonttoolsを使用しPythonにてフォントをサブセット化する

  • woff2の方が軽量だが、IEとAndroidで非対応のためwoffを選択
  • サブセット化する対象文字の選定
    第一水準+記号+ひらがな+カタカナ+数字+常用漢字+人名漢字(3543字)とした
    (使用用途によって適宜サブセット化する対象文字を変更することで対応)

日本語サブセット化の方法について

使用するもの

  • fonttools
  • 軽量化したい OpenTypeフォント(Noto Serif CJK JPなど)
  • フォントに格納する文字のテキストファイル(第一水準+記号+ひらがな+カタカナ+数字+常用漢字+人名漢字)

事前準備

  • Python
  • pip(Pythonのパッケージ管理)
  • virtualenv(仮想環境作成)

pipのインストール

pipがない場合はhttps://bootstrap.pypa.io/get-pip.pyを保存して下記を実行

$ python get-pip.py
$ pip -v

バージョンが表示されたら成功

virtualenvのインストール

virtualenvをpipを使ってインストールする

$ pip install virtualenv

fonttoolsのインストール方法

fonttoolsのREADMEに記載あり
※Python の virtualenv というパッケージを使って仮想環境を作り、その中で FontTools を動かす。

1.ソースコードをダウンロード

$ git clone https://github.com/fonttools/fonttools.git

2.fonttools ディレクトリに移動

$ cd fonttools

3.仮想環境を作る

$ python -m virtualenv fonttools-venv

4.仮想環境を有効化

$ . fonttools-venv/bin/activate

5.インストール

(fonttools-venv) $ pip install -e .

6.brotli もインストール

(fonttools-venv) $ pip install brotli

fonttoolsの使用方法

1.fonttools ディレクトリに移動

$ cd fonttools

2.仮想環境を有効化

$ . fonttools-venv/bin/activate

3.フォントファイルとテキストファイルの場所を指定してpyftsubset
以下は例

(fonttools-venv) $ pyftsubset ./_src/NotoSerifJP-Regular.otf --text-file=./_src/chars.txt --layout-features='*' --flavor=woff --output-file=./_dist/NotoSerifJP-Regular.min.woff


上記のディレクトリ構造例
/fonttools/
  /src/
    chars.txt(サブセット化する文字一覧のテキストファイル)
    NotoSerifJP-Regular.otf
    ...他、各ウェイトのフォントファイル
  /
dist/(ここにフォントが生成される)

キャッシュについて

フォントファイルは頻繁に更新しないため、キャッシュを利用してユーザーの通信を減らしたい。
読み込み部分にファイルの更新日を記入することで、無駄な通信を減らせる。

@font-face {
        font-family: "Mincho";
        font-style: normal;
        font-weight: 400;
        src: url('fonts/Mincho-Regular.min.woff?20190612') format('woff');
        font-display: swap;
}

その他の方法

.htaccessでキャッシュの制御を行えるが、案件によって.htaccessがいじれない場合がある。
使用方法を社内で統一したいため、今回は見送り。

ライセンスについて

サブセットフォントをつくる場合はくれぐれもライセンスに注意してください。
サーバーにアップロードして、webフォントとして使用する場合は「再配布」にあたります。
また、サブセット化する場合は「改変」にあたります。
「再配布」「改変」が許されているフォントを使用してください。

今回使用しているNotoはSIL Open Font License 1.1なので

  • 元のフォント名は使用しない
  • 元のフォントのダウンロード先を明記する

を守るため、下記をcssに追加しました。

/*
* "NotoSerifJP" licensed under the SIL Open Font License
* https://www.google.com/get/noto/#serif-jpan
*/

引用・参考

OpenTypeフォントの軽量化と自動カーニング(https://ureta.net/2017/02/tool_fonttools/
FontToolsの使い方(
https://qiita.com/daisuke_matsumoto/items/88c1391175a1888a7b08

shiki-design
Web制作の企画、開発、運用から、グラフィックデザイン、お客さまのブランディングを全面的にプロデュースしています。
https://www.shiki-design.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away