この記事は、先日投稿した私の記事の続きになります。

事の詳細は以前の記事を読んでもらえればと思いますが、簡単にまとめると Vivliostyle で作成される PDF は一般にコマンドを実行した環境のフォントが採用されます。私は macOS のローカル環境で執筆をして、印刷入稿データは docker で作成しています。また、チームで執筆することもあり、それぞれの執筆環境が同じとは限りません。そのため、フォントが執筆環境に依存するという問題がありました。

フォントを揃えたい

このフォント問題は認識してましたが、さほど重大ではないと思っていました。しかし、ローカル環境で調整した段落配置が、docker で作成した入稿データと異なっていたことに気付きました。今回はページ数が変わらなかったので影響は少ないですが、ページ数が変わったら大変です。そこで、執筆プロジェクトでフォントを組み込んで、どの環境でも同じフォントとなるようにしました。その方法を先日の記事で書きました。

ここで問題があります。私のいくつか執筆テンプレートを管理しています。それぞれにフォントデータや CSS を追加するのは面倒ですし、フォントデータ（約 50 MB）分ファイルサイズが増えてしまうことが気掛かりでした。そこで、このフォント設定をテーマとして作れば、ビルド設定にテーマを追加するだけ、フォントデータはテーマに付属するので執筆プロジェクト自体に影響しない、ということでテーマを作りました。

@mitsuharu/vivliostyle-theme-noto-sans-jp

フォントを設定するテーマ @mitsuharu/vivliostyle-theme-noto-sans-jp を作成しました。なお、このテーマに組み込んでいるフォントは Google Fonts の Noto Sans JP と Noto Sans Mono です（Google Fonts のライセンスは商用利用、印刷、再配布を許可しています）。本文のフォントが Noto Sans に、ソースコードなどの等倍フォントが Noto Sans Mono に設定されます。

導入方法は vivliostyle.config.js の theme に設定します。フォントを設定するだけなので、他のテーマと一緒に利用してください。また、他の theme でフォントを変更している場合は、それに影響しないように注意してください。

vivliostyle.config.js

module.exports = {
  theme: [
    '@vivliostyle/theme-techbook'
    '@mitsuharu/vivliostyle-theme-noto-sans-jp',
  ],
};

このテーマを導入した PDF のフォント情報です。これまでローカルのシステムフォントを利用してたところが、テーマに組み込まれた Noto Sans に変更されました。なお、全角と半角の間に不明な Times フォント（ゼロ幅？）があったり、𝕏 などの文字に T3Font が適用されるなど、一部の文字で他のフォントが使われました。気になりますが、見た目の影響は少ないと判断しました（正直なところ、よく分かってない）。また、埋め込まれていない T3Font に関しては、Adobe Acrobat Pro で文字のアウトライン化してください。

テーマ作成

自作テーマは公式ドキュメントを参考にして作成しました。雛形を作るコマンドを実行して、それを編集してテーマを作成しました。注意点として、現時点（2024/11/05）の雛形で設定される @vivliostyle/cli のバージョンに不具合があるのか、一部で動作が期待通りになりませんでした。その問題は最新バージョン（記事執筆時は 8.16.0 です）に更新したら直りました。

まとめ

このテーマを作ったおかげで、フォント設定がとても簡単になりました。実際に印刷された本の段落が、執筆時と異なるという残念なことが起こらないようにしていきたいです。また、自作テーマの作り方を経験できたのはよかった。機会があればバリバリにカスタムテーマを作ってみたいです。おわり。