印刷屋プラグインは、HTML と CSS の帳票をブラウザーの中で組み、その描画を画像にして PDF に貼ります。そのため、これまでは 帳票を作る端末に入っている書体 で文字が描かれ、Windows・Mac・スマートフォンで同じ帳票の PDF の見た目がずれることがありました。
Ver.6 では「Web フォント」を入れました。目的は、PC・Mac・スマートフォンで帳票の書体をそろえることです。 帳票の書体を端末に頼らず配信元から読み込み、あわせてスマートフォン版に対応しました。この記事では、ずれが起きるしくみと、Web フォントとスマートフォン版がそれをどう抑えているかを図で説明します。
対象は、印刷屋プラグインを使う kintone のアプリ管理者と、帳票の設定担当者です。
1. これまで: 端末の書体で描いていた
1.1 PDF ができるまで
印刷屋プラグインの PDF は、文字を文字として埋め込むのではなく、ブラウザーが描いた帳票を画像にして 貼ります。画像にするのは html2canvas、PDF にするのは jsPDF です。
画面に描かれたものがそのまま PDF になるので、どの書体で描かれたか が PDF の見た目を決めます。PDF に書体のデータは入りません。
1.2 端末ごとに書体が変わる
帳票の CSS で font-family を指定しないと、帳票は kintone の画面の書体の指定を継ぎます。kintone の PC 画面の指定は「メイリオ → ヒラギノ角ゴ ProN → ＭＳ Ｐゴシック → … → sans-serif」の順で、端末に入っている最初の書体 が使われます。
| 端末 | 使われる書体 |
|---|---|
| Windows | メイリオ |
| Mac（メイリオが入っていない場合） | ヒラギノ角ゴ ProN |
| iPhone | ヒラギノ角ゴ ProN |
| Android | 指定の書体が無いので、端末の標準の sans-serif |
同じ見積書を、Web フォントなしで Windows と Mac で表示した例です。字形が違います。
Windows（メイリオ）
Mac（ヒラギノ角ゴ ProN）
スマートフォン版の kintone の画面は書体の指定が PC と違うため、印刷屋プラグインはスマートフォンの帳票の部分にも PC と同じ並びを当てています。それでも、端末に入っている書体が違えば結果は表のように分かれます。
1.3 書体の違いがずれになるまで
書体が違うと、同じ文字列でも 1 文字ごとの幅が違います。帳票は幅の決まった表や枠でできているので、幅の違いが折り返しの違いになり、そこから先に広がります。
Windows で整えた帳票を Mac やスマートフォンで作ると崩れる、というのはこの流れです。
2. Web フォントのしくみ
Web フォントは、PC・Mac・スマートフォンで帳票の書体をそろえるために入れました。1 章のずれの元である「端末ごとに書体が違う」をなくすのが目的です。
2.1 何をするか
設定の「Web フォント」を有効にすると、帳票を作るときに、指定した書体を配信元（既定は Google Fonts）から読み込み、帳票のページに当ててから PDF にします。一度読み込んだ書体は、ブラウザーのキャッシュから使います（下のポイントの 4 つ目）。どの端末でも同じ書体ファイルで描くので、字形がそろいます。Noto Serif JP で同じ帳票を PC と iPhone で作って比べたところ、書体と印影の位置はほぼ同じで、違いは表の改行位置 1 か所でした（4 章）。
1.2 と同じ見積書を、Web フォントに BIZ UDPGothic を指定して表示した例です。
Windows（Web フォント BIZ UDPGothic）
Mac（Web フォント BIZ UDPGothic）
ポイントは 4 つです。
- 書体を読み込み終わってから画像にする。読み込み中のまま描くと、途中まで端末の書体で描かれた PDF になるためです。
- 使う文字の分だけ読む。Google Fonts の日本語書体は、文字の範囲ごとに小さな woff2 に分かれています（2026 年 10 月に Noto Sans JP の 400 と 700 を数えたところ、248 ファイル、合計約 11 MB）。印刷屋プラグインはページの文字をブラウザーに渡して読み込ませるので、帳票に出てくる文字を含むファイルだけが読まれます。
- 読み込めなくても止めない。配信元に接続できないときは、端末の書体で PDF を作ります。
- 一度読み込んだ書体は取り直さない。同じ画面では、書体の CSS を 1 回だけ読み込み、読み込み済みの文字の範囲は取り直しません。画面を開き直したときも、ブラウザーのキャッシュに残っていれば配信元から取り直しません。Google Fonts は、書体の CSS を 1 日、woff2 を 1 年キャッシュしてよいと応答しています（2026 年 10 月に応答のヘッダーで確認）。
2.2 どの書体で描かれるか
Web フォントは帳票のページの基本の書体として当たります。帳票の CSS で font-family を指定した部分は、そちらが優先です。
帳票全体を Web フォントでそろえたいときは、帳票の CSS に font-family を書かないでください。逆に、見出しだけ別の書体にしたいときは、その部分にだけ font-family を書きます（その書体も Web フォントでないと、端末によっては別の書体になります）。
2.3 設定
書体名のボタンで開く「Web フォント」の画面です（BIZ UDPGothic を選んだところ）。
- プラグイン設定画面のツールバーで「Web フォント」をチェックする
- 右の書体名のボタン（既定は「Noto Sans JP」）を押し、言語（日本語 / 英語 / 中国語）と書体を選ぶ
- 候補は Google Fonts の書体で、いずれも SIL Open Font License です
- 「その他」を選ぶと、書体の CSS の URL（https）と font-family を直接指定できます
- 例文がその書体で表示され、下に「書体を読み込みました」と出れば読み込めているので、確かめてから保存する（読み込めなければ「書体を読み込めませんでした（OS の書体で表示しています）」と出ます）
帳票を作る人のブラウザーが、配信元（Google Fonts なら fonts.googleapis.com と fonts.gstatic.com）に接続します。China 版の kintone や、外部への通信を制限している社内ネットワークでは Google Fonts に接続できないので、「その他」で接続できる配信元を指定してください。自前の配信元を用意する手順は別の記事にまとめています。
3. スマートフォン版
3.1 できること
スマートフォン版のレコード詳細画面で、個別帳票を作れます（一覧の一括処理と一覧帳票は PC 版だけです）。
詳細画面のボタン（左）と、「見積書」をタップして開いたプレビュー（右）です。
- ボタンの並びは PC と同じです。設定の「ボタンをメニューにまとめる」も効きます（画像の「印刷屋 ▾」）。
- プレビューは画面の幅に合わせて縮小して表示し、「−」「+」「幅に合わせる」「100%」と 2 本指のピンチで拡大縮小できます。PDF を作る前に等倍に戻すので、拡大縮小は PDF に影響しません。
- PDF は添付ファイル項目に保存します。保存先の設定が無いボタンは、PDF ができると「共有」で端末の共有シート（ファイルに保存、メールなど）に渡します。
- Android の kintone モバイルアプリは共有もダウンロードも使えないため、保存先の添付ファイル項目を設定してください。
3.2 ボタンは Web フォントが有効なときだけ出す
スマートフォンは、PC とは入っている書体が違います（1.2 の表）。Web フォント無しでスマートフォンから PDF を作ると、PC で整えた帳票が 1.3 の流れで崩れることがあります。そこで、スマートフォン版のボタンは、設定の「Web フォント」が有効なときだけ 出します。
Web フォントは PC の帳票にも効きます。スマートフォン版を使うために Web フォントを有効にしたら、PC の帳票も一度作り直して、折り返しなどを確かめてください。
3.3 文字の大きさをそろえる
書体のほかに、スマートフォンには 文字の大きさ のずれもあります。
スマートフォン版の kintone の画面は、基本の文字の大きさが PC と違います。帳票は画面の文字の大きさを継ぐので、そのままでは同じ帳票でも PC より文字が小さくなり、行間が詰まって印影などの位置がずれました。印刷屋プラグインは、スマートフォンのプレビューの基本の文字の大きさを PC と同じ 16px にしています。
もう 1 つは Android の「フォントサイズ」です。kintone の Android アプリは、端末の設定の「フォントサイズ」を、画面のすべての文字に一律の拡大として掛けます。Rakuten Hand（Android 10）で「大」にしたところ 1.15 倍になり、同じ帳票でもアプリで作った PDF だけ文字と行間が大きくなりました（Android の Chrome、iPhone、PC は拡大なし）。CSS の text-size-adjust では止まりませんでした。
印刷屋プラグインは、帳票を組んだ直後に拡大の倍率を測り、拡大がかかっていれば打ち消してから PDF にします。
この端末で、PC と同じ大きさの PDF になることを確かめています。
4. 書体をそろえても残る差
Web フォントで書体をそろえても、どこで折り返すかの判断 はブラウザーで違うことがあります。iPhone の Safari と Chrome はどちらも WebKit で描くので同じ規則ですが、PC の Chrome とは違います。2.1 の比較で違った 1 か所は、word-break: keep-all を指定した列の「kintone ワイドコース（1,000ユーザー）」で、PC の Chrome は「（」の手前で、iPhone は「kintone」の後で折り返していました。
改行の位置が決まっているところは、帳票の側で固定してください。
-
<br>（計算式ならVTAG("br")）で改行を明示する - その列に
white-space: nowrapを指定し、列の幅で調整する
5. 注意事項
- Web フォントを有効にすると、帳票の表示が変わります。 書体が変わると文字の幅が変わるので、折り返しの位置、行やセルの高さ、ページに収まる量が変わることがあります（1.3 の流れ）。1.2 と 2.1 の例でも、Windows で同じ行の幅が変わっています。有効にしたら、使っている帳票をプレビューで確かめ、必要なら列の幅、文字の大きさ、改行を直してください。
- Web フォントは PC の帳票にも効きます。スマートフォン版を使うために有効にした場合も、PC の帳票の表示が変わります。
- 書体を読み込めなかったときは端末の書体で作るので、その PDF は Web フォントで作った PDF と見た目が違います。
6. まとめ
| これまで（Web フォントなし） | Web フォントあり | |
|---|---|---|
| 帳票の書体 | 端末に入っている書体（Windows はメイリオ、Mac・iPhone はヒラギノ角ゴ ProN など） | 配信元から読み込んだ同じ書体 |
| 端末ごとの PDF | 文字の幅が違い、折り返しや行の高さがずれる | 字形がそろう（折り返しの判断はブラウザーで違うことがある） |
| スマートフォン版のボタン | 出さない | 出す |
| 必要な通信 | なし | 帳票を作る人のブラウザーから配信元へ |